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PRÓLOGO 


En un mundo donde la tecnologia avanza a pasos agigantados, el desarrollo web se ha 
convertido en una habilidad indispensable. Si estás aquí, es porque compartimos una 
pasión: crear aplicaciones web que no solo funcionen, sino que también ofrezcan 
experiencias significativas a los usuarios. 


Este libro nace de nuestras experiencias en el fascinante ecosistema de JavaScript, 
Node.js, Express, y MySQL. A lo largo de nuestra carrera profesional, hemos 
descubierto que dominar estas tecnologias puede abrir un abanico infinito de 
posibilidades, permitiéndonos construir desde soluciones simples hasta complejas 
plataformas que impactan en la vida de muchas personas. 


Comenzaremos explorando JavaScript, el lenguaje que, aunque empezó siendo 
sencillo, se ha convertido en una herramienta poderosa tanto en el frontend como en el 
backend. Les guiaremos a través de sus características más modernas y cómo pueden 
aprovecharlas para escribir código limpio, eficiente y fácil de mantener. 


Luego, nos adentraremos en Node.js, un entorno que ha revolucionado la manera en 
que desarrollamos para el servidor. Aprenderán a usar su arquitectura no bloqueante 
para crear aplicaciones rápidas y escalables, capaces de manejar múltiples usuarios de 
manera simultánea. 


En la sección dedicada a Express, les mostraremos cómo este framework minimalista 
puede simplificar enormemente el desarrollo de aplicaciones web. Juntos, veremos 
cómo gestionar rutas, manejar solicitudes y respuestas, y construir APIs que sean tanto 
robustas como seguras. 


Finalmente, Illegaremos a MySQL, el sistema de gestión de bases de datos que, a pesar 
de los afios, sigue siendo el pilar de innumerables aplicaciones. Aprenderán a disefiar y 
gestionar bases de datos relacionales que se integren perfectamente con tus 
aplicaciones Node.js, asegurando un rendimiento óptimo. 


Escribimos este libro pensando en ti, en lo que me hubiera gustado saber cuándo 
comenzamos nuestro camino en el desarrollo web. No importa si estás dando tus 
primeros pasos o si ya tienes experiencia, nuestro objetivo es que encuentres en estas 
páginas un recurso valioso que te ayude a avanzar y superar los desafios que se 
presenten. 


INTRODUCCIÓN 


Desde los inicios de la aparición de las tecnologias de información dos 
componentes avanzaron en forma ex potencial, el hardware y software, 
dependientes el uno del otro, por el lado del software se desarrollan herramientas 
que facilitan el procesamiento, sistematización, virtualización de muchos 
quehaceres de la vida cotidiana a nivel de escritorio o vía web. Por la necesidad de 
masificar dichas herramientas surge la necesidad de nuevas tecnologias, 
estândares, que permitan la comunicación entre hardware de diferentes partes del 
mundo. En este contexto aparece el HTML(HyperText Markup Language) por los 
afios 1980 con el afán de compartir documentos, desde sus inícios hasta hoy 
pasaron por diferentes versiones, el HTML5 ya es un estándar, de la misma manera 
otras herramientas como lenguajes de programación(JavaScript), CSS con su última 
versión CSS3 complementarios surgieron para dar un salto gigante en el desarrollo 


de soluciones web. 
En el proceso de desarrollo de soluciones web en este libro estudiaremos a: 


- HTML 

- Css 

E Bootstrap 
- JavaScript 
E Formato JSON 
- API REST 

- PHP 

- MySQL 

- Node.js 

E Framework 
- Express 


E Motor de plantillas EJS 


Diseno de páginas 
web frontend con 
HTML y CSS 
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1.1.1. HTML 


HTML es un lenguaje de maquetación que permite definir múltiples etiquetas para 
agregar los elementos necesarios para presentar o adicionar información a una página 
web. Estas etiquetas son palabras claves y atributos limitado por los signos mayor (<) y 
menor (>) Los navegadores de internet leen estos archivos de texto e interpretan las 


etiquetas para determinar cómo se puede desplegar la página. 


En este caso html es la palabra clave y lang es el atributo con valor es. Casi todas las 
etiquetas HTML se utilizan en pares, de inicio y final con una barra invertida que 


antecede a la palabra clave: 


lang= 


Contenido 


Los documentos HTML se encuentran estrictamente organizados. Cada parte del 


documento está diferenciada, declarada y determinada por etiquetas específica. 


1.1.2. Versiones HTML 


Y” HTML 1: Primera versión que creó Tim Berners-Lee en 1991. 


“HTML 2: Segunda versión del HTML apareció en 1994 y finalizó en 1996 
con la publicación del HTML 3.0. Las reglas y la operatividad de esta 


versión las otorgó el W3C1. 

” HTML 3: En 1996 aparece esta versión del HTML, que afiadió muchas 
posibilidades caracteristicas, como tablas, applets, scripts, 
posicionamiento de texto alrededor de las imágenes, etc. 

” HTML 4: Versión más común del HTML (HTML 4.01). Apareció por 


primera vez en 1998 y propuso el uso de tramas, tablas más complejas, 


1 El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla 


estándares que aseguran el crecimiento de la web a largo plazo. 
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mejoras en los formularios, etc. En esta versión permitió el uso de hojas 
de estilo CSS. 

“HTML 5: esta es la última versión. Aún no está muy extendida y lama 
mucho la atención porque proporciona muchas mejoras, como la 
capacidad para incluir vídeos fácilmente, un diseão mejorado del 
contenido, nuevas funciones para los formularios, etc. Esta es la versión 


que vamos a estudiar en detalle. 


1.1.3.  HTMLS 


Es la última versión de la World Wide Web aceptada por W3C€, que establece elementos 
y atributos que permiten crear sitios web más modernos y dinámicos, apoyados con las 
mejoras de CSS3 e integrando nuevas APIs con el lenguaje de programación JavaScript. 

TIPO DE 


DOCUMENTO 
Y VERSION 


TITULO Y charset= 


ENCABEZADO PECA 
DEL as da 
DOCUMENTO 


CUERPO DEL cuerpo del documento web 
DOCUMENTO 


FIGURA Nº 01-001: Estructura de un documento HTMLS5 


En la FIGURA Nº 01-001 se puede observar una estructura básica de una página web, 
<!IDOCTYPE> 


Con esta etiqueta se indica el tipo de documento que estamos creando: 


| DOCTYPE html> 


Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De 
esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 


son interpretadas siempre que sea posible, o ignoradas en caso contrario. 
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<html> 
Luego de declarar el tipo de documento, debemos comenzar a construir la estructura 
HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el 


elemento <html>. Este elemento es el inicio y final de la página: 


El atributo lang en la etiqueta de apertura <html>. Este atributo define el idioma del 


contenido del documento que estamos creando, en este caso es por espafiol. 


<head> 
El documento dentro de <html> se divide en dos secciones principales, la primera es la 
cabecera y el segundo el cuerpo, para lo cual utilizaremos las etiquetas: <head> y 


<body> respectivamente. 


Dentro de esta etiqueta <head> definiremos el título de la página web con la etiqueta 
<title>; con la etiqueta <meta> se declara: el set de caracteres correspondiente con el 
atributo charset="utf-8", que permita la visualización correcta de tildes o acentos que 
se encuentran en el contenido de la página; información general a cerca del documento; 
archivos externos con estilo, código JavaScript, entre otros con la etiqueta <link>, que 
tiene dos atributos rel que significa relación y es a cerca de la relación entre el documento 


y que se está incorporando mediante href. 


La mayoría de la información contenida en el documento entre esta etiqueta es invisible 
para el usuario a excepción del título y algunos iconos, pero si es importante para los 


motores de búsqueda y dispositivos que necesitan hacer vista previa de la página web. 
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a description" content="Ejemplo de HTMLS” 
name="keywords” content="HTMLS, CSS3, Javascript” 
EJEMPLO 008001 

rel="stylesheet” href="misestilos.css” 


<body> 


Esta etiqueta delimita el cuerpo del documento HTML, permite visualizar todo el 


contenido de la página web como texto, imágenes, videos, etc. Esta etiqueta tiene 


atributos, algunas de ellas: 


Y 


Vá 
Vá 
Vá 
Vá 
Vá 
Vá 


BIENVENIDO AL CURSO DE PROGRAMACION II 


bgcolor: define el color de fondo de la página. 

text: especifica el color del texto de la página. 

link: color de los vínculos en la página. 

alink: color del vínculo actual o activado en la página. 

vlink: color del vínculo ya visitado. 

background: establece una imagen de fondo en la página web. 


style: permite definir estilos de disefio que afectaran toda la página. 


et="utf-8” 

name=" description” content="Ejemplo de HTMLS” 

name="keywords” content="HTMLS, CSS3, Javascript” 
EJEMPLO 00001 
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1.1.4. El cuerpo de la página, la etiqueta 


<body> 


Esta etiqueta delimita el cuerpo del documento HTML, permite visualizar todo el 
contenido de la página web como texto, imágenes, videos, etc. Esta etiqueta tiene 


atributos, algunas de ellas: 


Y bgcolor: define el color de fondo de la página. 

text: especifica el color del texto de la página. 

link: color de los vínculos en la página. 

alink: color del vínculo actual o activado en la página. 
vlink: color del vínculo ya visitado. 


background: establece una imagen de fondo en la página web. 


NR NS 


style: permite definir estilos de disefio que afectaran toda la página. 


name= 
EJEMPLO 00001 


body 
BIENVENIDO AL CURSO DE PROGRAMACION II 


body 


Nota. - 

Para el color en una página web se especifica el color deseado con el nombre del color en 
inglés (blue, black, etc.) o mediante números hexadecimales con a la siguiente estructura: 
£RRVVAA (R=rojo, V=verde, A=azul). Por ejemplo, para obtener el color negro, la 


estructura sería 4000000 y para el blanco &FFFFFF, técnicamente. 
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tFFFF66 255, 255, 102 60, 100%, 70% 


FIGURA Nº 01-00002: 


Tabla de colores https: //htmlcolorcodes.com/es/tabla-de-colores/ 


Estructura más detallada del cuerpo <body></body> 

En versiones anteriores a HTML5 la parte visible se estructuraba o disefiaba con las 
etiquetas <table> y <div>, pero con la nueva versión incorporo nuevos elementos que 
ayudan a identificar cada sección de la página y del cuerpo. 

Una página o aplicación web se divide entre varias áreas visuales para mejorar la 
interactividad del usuario. Las etiquetas que representan cada nuevo elemento de 


HTML están íntimamente relacionadas con estas áreas. 
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Una página puede presentar la estructura de la FIGURA Nº 01-003 


CABECERA 


BARRA DE NAVEGACION 


CUERPO PRINCIPAL BARRA 
LATERAL 


INSTITUCIONAL 


FIGURA Nº 01-003: Ejemplo de estructura de una página web 


Algunos disefios: 


FIGURA Nº 01-004. Ejemplo de una página web con una estructura descrito 
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O IinDusTRIAL 


For OUR CLIENTS 


38 WELCOME 
SE 


ay aque cor runti ques m dolceos 
aço char ape seres Foscdos 


q Cor Los Cu 
rasa qudom recurs focãs, 


FIGURA Nº 01-005. Ejemplo de una página web con una estructura descrito 


La FIGURA Nº 01-0083, se podría plasmar con las siguientes etiquetas en HTML5 


<header> </header> 


<nav> </nav> 


<section> <aside> 


</section> </aside> 


<footer> </footer> 


FIGURA Nº 01-006: Etiquetas en HTML; de cada sección de la página web 
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<header> 

En HTML se incorporó esta etiqueta <header>, que sirve para poner títulos, subtítulos, 
logos de la página, no debe confundirse con <head> que sirve para construir la cabecera 
del documento, en código seria así: 


TYPE html 
nl lang="es” 


a charset= 
3 name= ipti content="E) 
meta name="key " content="HTM 


title>Titulo de la Pagina web</title 


4 


TITULO DE LA PAGIAN WEB 


<nav> 
Esta etiqueta sirve para agregar una barra de navegación en la página web, en código 


seria asi: 


body 
h a ad er 
hi>TITULO DE LA PAGIAN WEB</h1 


hneader 


INICIO 
11>DOCUMENTOS</11 
1i>DIRECTORIO</11 
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<section> 
Con esta etiqueta según la sección del diseão de la FIGURA Nº 01-0083, se delimita 
información más relevante de la página web puede ser disefiada en diferentes formas. 


Un ejemplo se ve en el siguiente código: 


at="“utf-s” 
“description” « nt="Ejemplo de HTMLS” 
name="keywords” content="HTMLS, CSS3, Javascript” 


Titulo de la Pagina web 
TITULO DE LA PAGIAN WEB 


INICIO 
DOCUMENTOS 
DIRECTORIO 


<section> 


En esto se llena contenido 


</section> 
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<aside> 


En el disefo planteado en la FIGURA Nº 01-003, la columna Barra Lateral, que está 
al lado derecho de la sección Información Principal, generalmente se podría poner 


notas no tan relevantes con la información principal o lo que se considere conveniente. 


Esta etiqueta también se puede utilizar para poner información u otras cosas en la parte 
derecha de la Información Principal por lo tanto <aside> solo describe la 
información que contiene y no el lugar dentro de la estructura, este elemento se puede 


utilizar también dentro <section>. Ejemplo en el siguiente código: 


1! DOCTYPE html> 
html lang= 
head 
meta charset= 
meta name= content= 
meta name= content= 
title>Titulo de la Pagina Web</title 
head 
body 
header 
h1>TITULO DE LA PAGIAN WEB</h1 
header 
nav 
ul 
1Ji>INICIO</1i 
1i>DOCUMENTOS</1i 
1i>DIRECTORIO</1i 
ul 
nav 
section 


section 
aside 


blockquote>Nota uno</blockquote 
blockquote>Nota dos</blockquote 


aside 


body 
html 
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<footer> 


Esta etiqueta nos permite poner información en la parte final de la página web según el 


disefio planteado en la FIGURA Nº 01-003, tal como se muestra en el código siguiente: 


DOCTYPE html 
html lang= 
head 
meta charset= 
meta name= content= 
meta name= content= 
title>Titulo de la Pagina web</title 
head 
body 
header 
hi>Portada</h1 
header 
nav 
ul 
1i>INICIO</1i 
1i>DOCUMENTOS</1i 
1i>DIRECTORIO</1i 
ul 
nav 
section 
section 
aside 
blockquote>Nota uno</blockquote 
blockquote>Nota dos</blockquote 
aside 
footer 
Correo: amarilis2020Mgmail.com 
Telefono: (062)515330 


footer 
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1.1.5. Formularios HTML <form> 


Cuando una página web requiera datos para diferentes propósitos (por ejemplo, páginas 
de búsqueda, recojo de datos, etc.), contienen elementos o controles que hace posible el 
ingreso de estos para luego procesarlas, en HTML existe la etiqueta <form> que hace 
posible y contiene diferentes controles de: texto, opciones, listas, listas desplegables, 


botones, etc. 


FORMULARIO DE INGRESO DE DATOS 


22751077 | 
JUAN DE DIOS GARCIA, JOSE 


dos de mayo Nº45287 


(9 MASCULINO O FEMENINO 
GRABAR || CANCELAR 


FIGURA Nº 01-007: Formulario de Ingreso de Datos de una persona 


En la FIGURA Nº 01-007 se puede apreciar un formulario que contiene varios controles 
que permite interactuar con el usuario para el recojo de datos, para ello a nivel de código 


la etiqueta <from> tiene la siguiente estructura básica: 


El id, name: son identificadores del formulario; method: es el método HTTP usado 
para envió del conjunto de datos del formulario, los valores podrían ser: post, get; 
action Sin dudas, este es el principal atributo para el funcionamiento de un formulario. 
Su valor debe ser la URL de un archivo programado en algún lenguaje de servidor, como 
PHP, ASP, JSP, etc. para que ese archivo reciba las variables enviadas desde el formulario 
(una por cada control de formulario), y pueda hacer algo con esos datos (típicamente, 
insertarlos en una base de datos en el servidor, o enviarlos por email al administrador 


del sitio). 
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ALGUNOS CONTROLES 


Dentro de la etiqueta <form> se puede insertar controles que permitan ingresar y 


seleccionar datos, interactuar, etc., para insertar un control generalmente se utiliza 
input type="control" 
text 


Control que permiten ingresar textos, contrasefias en un formulario: 


checkbox 


Este control es un interruptor de encendido/apagado que pueden ser conmutados por el 
usuario. Una casilla de verificación está "marcada" cuando se establece el 
atributo checked del elemento de control. Cuando se envía un formulario, solamente 


pueden tener éxito los controles de casillas de verificación que estén marcadas. 


radiobutton 


Los radios botones son como las casillas de verificación, excepto en que cuando varios 
comparten el mismo nombre de control, son mutuamente exclusivos: cuando uno está 


"encendido”", todos los demás con el mismo nombre se "apagan”. 


MASCULINO 


Select 


Con este control se crea una lista desplegable para que el usuario pueda seleccionar, para 


seleccionar por defecto un elemento de la lista se utiliza 


selected="selected". 
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PILLCOMARCA 


botones 


botones de envio (submit): Cuando se activa, un botón de envio envía un formulario. Un 


formulario puede contener más de un botón de envio. 


botones de reinicialización (reset): Cuando se activa, un botón de reinicialización 


reinicializa todos los controles a sus valores iniciales. 


Botones genéricos son aquellos que no tiene ninguna función definida, sino la que 
nosotros queramos darle. Para insertar un botón genérico usaremos la etiqueta INPUT 
con TYPE="button" 
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<!DOCTYPE hntml > 

<hrmli> 

<head> 

<meta charset="utTts”" /> 
<tTitle>FORMULARIOS</title> 
<style type-"text/css"> 


-«-Estilol f 
font-size: 24px; 
£font-weight: bold: 
color: %00009595; 

; 


</style> 
</head> 


<body> 
<form id="forml” name="forml” method="post” action=""> 
<table align="center"> 
<tr> 
<td width="722"> 
<div align="center” class="Estilcl">FORMULARIO DE INGRESO DE DATOS </div></ta> 
</Tr> 


width="702" 


<tã widtrnh="267">DNI</td> 
<td width="419"><label> 
<input type="text” name="textfield” 
</label></ta 
</tr> 


<tr> 
<Td>APELLIDOS Y NOMBRES </td> 
<td><label> 
<input name-"textfield2” rype-"text” size-"60” /> 
</label></td> 
</tr> 
<cr> 
<Td>CORREO< /tTd> 
<td><label> 
<input name="textfieceld3” type-"text” size-"60" /> 
</label></tTd> 
Tr> 
<tr 
<Td>REGION</tTd> 
<td><label> 
<select name="select”"> 
<option>LIMA</option> 
<option>AREQUIPA</option> 
<option>JUNIN</option> 
<option sejected="seljected">HUANUCO< /option> 
</select> 
</label></tTd> 
</tr 
<tr> 
<Td>PROVINCIA</tTd> 
<td><label> 
<select name="“select2"> 
<option seljected="selected">HUANUCO< /option> 
<option>LEONCIO PRADO</option> 
<option>-AMBO</option> 
<option>PACHITEA</option> 
</select> 
</label></tTd> 
</tr> 
<t 


<tTd>DISTRITO</td> 
<td><label> 
<select name="select3”> 
<optTion>HUANUCO- /optTion> 
<option selected="seljected">AMARILIS</option> 
<option>PILLCOMARCA-/option> 
</select> 
</label></tTd> 
</Tr 
<tr 
<td><1labe1>DIRECCION</1abel></tTd> 
<td><label> 
<input name="textfield4”" type="text” size="60" /> 
</label></td> 
</tr> 
<o> 
<tTd>SEXO< /tTd> 
<td><label> 
<input name-"radiobutton”" type-"radio” value-"radiobutton” checked-"checked"” /> 
MASCULINO 
<input name-"radiobutton” type-"radio” value-"radiobutton” /> 
FEMENINO</1label></tTd> 
</tr> 
<tri 
<td>&nbsp;></ta 
<td><inputr type="submit” name="Submit” valuse="GRABAR” /> 
<input type="submit” name="Submit2” valuse="CANCELAR” /></ta 
</tr> 


New 


FIGURA Nº 01-008: Código HTML del disefio de la magina de la FIGURA Nº 01-007 
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12)685 


1.2.1. CSS (Cascading Style Sheets) 


“EI CSS es un lenguaje de estilos empleado para definir la presentación, el formato y la 
apariencia de un documento de marcaje, sea html, xml, o cualquier otro. Comúnmente 
se emplea para dar formato visual a documentos html o xhtml que funcionan como 
espacios web. También puede ser empleado en formatos xml, u otros tipos de 


documentos de marcaje para la posterior generación de documentos. 


Las hojas de estilos nacen de la necesidad de disefiar la información de tal manera que 
podemos separar el contenido de la presentación y, ast, por una misma fuente de 
información, generalmente definida mediante un lenguaje de marcaje, ofrecer 
diferentes presentaciones en función de dispositivos, servicios, contextos o aplicativos. 
Por lo que un mismo documento html, mediante diferentes hojas de estilo, puede ser 
presentado por pantalla, por impresora, por lectores de voz o por tabletas braille. 
Separamos el contenido de la forma, composición, colores y jfuentes...” (CSS3 y 


Javascript avanzado, Jordi Collell Puig) 


Parte de la estructura de la 
pagina del JNE con HTML 
sin CSS 


INE Y UNIVERSIDAD 
PRIVADA ANTENOR 
ORREGO CONTRIBUIRAN 
AL FORTALECIMIENTO 
DEMOCRÁTICO DEL PERU 


a 
z 
5 
= 


Parte de la pagina del JNE 
con HTML + CSS 


FIGURA Nº 01-009: Pagina web HTML sin CSS y con CSS 
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1.2.2. Versiones del CSS 


Y” €SS1: la primera versión del CSS se usó a partir de 1996. Se sentó las bases de 
este lenguaje que permite mostrar las páginas web con colores, márgenes, tipos 
de letra, etc. 

Y” €SS 2: apareció en 1999 y luego se completó con la versión CSS 2.1. Esta versión 
nueva del CSS afiadió numerosas opciones. Ahora podemos usar con bastante 
exactitud las técnicas de colocación para mostrar objetos en el lugar que 
queremos que estén en la página. 

” CSS 3: esta es la última versión, esta incluye funciones muy esperadas, como 


bordes redondeados, degradado, sombras, etc. 


El disefio básico de una página descrito en la FIGURA Nº 01-008, cuya estructura 


es el siguiente: 


<headre> </header> 


<nav>  </nav> 


<section> <aside> 


</section> </aside> 


<footer>  </footer> 


FIGURA Nº 01-010: Estructura básica de una página web 
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Cuyo código en HTMLS es el siguiente: 


DOCTYPE html 
html lang= 
head 
meta charset= 
meta name= content= 
meta name= content= 
title>Titulo de la Pagina web</title 
head 
body 
header 
hi>TITULO DE LA PAGIAN WEB</h1 
header 


nav 
ul 
li>INICIO</1i 
1i>DOCUMENTOS</1i 


1li>DIRECTORIO</1i 
ul 
nav 


section 
section 
aside 
blockquote>Nota uno</blockquote 
blockquote>Nota dos</blockquote 
aside 
footer 
Correo: amarilis2020(gmail.com 
Telefono: (062)515330 
footer 
html 


Si se visualiza este código en el navegador Google Chrome seria algo así: 


Q Titulo de la Pagina Web x + 


- 127.0.0.1:5500/PROGRAMACION%20BASICA/int.html 
E Cc Oo / 


TITULO DE LA PAGIAN WEB 


e INICIO 
* DOCUMENTOS 
e DIRECTORIO 


Nota uno 


Nota dos 
Correo: amarilis2020(G gmail.com Telefono: (062)515330 


FIGURA Nº 01-011: Pagina sin aplicar CSS 


24 


Como se pude apreciar, no está como realmente quisiéramos de acuerdo a la estructura 


disefiada. Esto es básicamente porque cada navegador ordena las etiquetes por defecto 


de acuerdo a su tipo: block(bloque) o inline (en línea). Esto se refleja en la forma en 


que las etiquetas son mostradas en pantalla. 
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Y Elementos block son posicionados uno sobre otro hacia abajo en la página. 


<headre> </header> 
<nav> <lnav> 


<section> </section> 
<aside> </aside> 
<footer> </footer> 


Y Elementos inline son posicionados lado a lado, uno al lado del otro en la misma 
línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal 


para ubicarlos. 


<headre> </header> <nav></nav> <section> </section> 
<aside> <laside> <footer> <lfooter> 


Modelo de Caja 


Cada navegador considera cada elemento HTML como una caja. Una página web es un 
conjunto de cajas ordenadas siguiendo ciertas reglas, estas reglas son establecidas por 
estilos definidos por defecto en los navegadores o por los disefiadores utilizando CSS 
que tiene un set predeterminado de propiedades que permiten sobrescribir los estilos 
predefinidos. Combinando estas propiedades se forman reglas que se pueden utilizar 
para agrupar cajas y lograr la correcta disposición en pantalla. Todas estas reglas 


aplicadas juntas constituyen lo que se Ilama un modelo de caja. 


1.2.3. Aplicando estilos CSS a una 
página web 


Estilos en línea 


Se puede aplicar estilos CSS a una página web, directamente asignando estilos dentro de 
las etiquetes con el atributo style. En el siguiente código en la etiqueta <p> se modifica 
el atributo style con el valor font-size: 40px. Este estilo cambia el tamafio por defecto del 


texto dentro de la etiqueta <p> a un tamaãio de 40 pixeles. 
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|! DOCTYPE html> 
lang= 


PROBANDO ESTILOS CSS EN LINEA 


PROGRAMACION II 


Estilos embebidos 


Otra de las formas para aplicar estilos a una página web es insertar estos en la cabecera 
del documento y luego utilizar referencias para aplicar a las etiquetas HTML 


correspondiente: 


charset= 
PROBANDO ESTILOS CSS EMBEBIDOS 


PROGRAMACION II 


Estilos con archivos externos 


En las dos formas anteriores para aplicar estilos a los elementos de una página hay 
desventajas cuando se tiene varios documentos en donde queremos que las mismas 
características o se uniformice ciertos disefios. Lo que se podría hacer es copiar en cada 
página estos estilos, lo que conlleva a una dificultad de mantenimiento. La solución sería 
tener todos los estilos a archivos externos y luego referenciarlo utilizando la etiqueta 


<link> para insertar el archivo dentro de los documentos que se requiera. 
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charset 
PROBANDO ESTILOS CSS EMBEBIDOS 


PROGRAMACION II 


El archivo de estilo externo de nombre: estilo.css 


Lo cual, la página en Google Chrome se veria así: 


3 PROBANDO ESTILOS CSS CON“ x + 


CGC O Archivo | D;/UNHEVAL/CURSOS/semestre2020-1/CARGA%20LECTIVA/PROGRAMACION%20II/SESIONO6/EJEMPLOCSS004 ESTILO CON ARCHIVO. EXTERNO.html 


PROGRAMACION H 


FIGURA Nº 01-012: Aplicando Estilos CSS 
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1.2.4. Reglas CSS 


Las reglas CSS, se componen de selector y declaración, estando la declaración 


compuesta por una serie de pares propiedad: valor: 


A continuación, se presenta a notación de algunas expresiones que define los valores de 


las propiedades: 


Vá 


Si encontramos que algo se debe escribir cómo valorA valorB, separados por 
espacios sin ningún carácter especial, esto significa que se debe escribir tal cuál a 


la hora de escribir los valores para la propiedad. 


Si tenemos elementos separados por barras verticales, |, como en el caso de 
<porcentaje> | <medida> | inherit, significa que el valor de la propiedad 
puede ser uno de los que se indica (los que están entre < y > serían un % válido o 


una medida válida, mientras que sin < y > significa que hay que ponerlo literal). 


Si tenemos elemento separados por ||, se puede indicar uno o más de los valores 
indicados y en cualquier orden, como en el caso de: <color> || <estilo> || 


<medida>. 


Si tenemos algo del tipo expresión*, implica que podemos poner la expresión 


cero o más veces. 
Si tenemos expresión+, implica que podemos ponerlo 1 0 más veces. 
éSi tenemos expresión?, implica que se puede tener o no la expresión. 


Si tenemos expresión (valor min, valor max%, implica que la expresión 
puede repetirse un número de veces dentro del rango dado por los extremos 


indicados. 


Ejemplos: 


Vá 


Y 


Vá 


[<family-name>, ]* — Pueden aparecer cero o más veces el par compuesto de 


un nombre de familia de fuente, seguido de una coma. 


<url>? <color> — Puede ponerse una url o no, e irá seguida de un color, en 


este caso obligatorio. 


[<medida> | thick | thin] (1,4; — Puede ponerse de 1 a 4 veces un elemento de 


los indicados: una medida, la palabra thick o la palabra thin. 
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Selectores 


Los selectores son los elementos a los que se aplica estilos o una o más reglas y estos a su 


vez podría afectar a varios elementos. 


Selectores básicos 


Selector universal: el asterisco (*). El estilo en cuestión se aplica a todo elemento de 


la página. 


Selector de tipo o etiqueta: viene dado por el nombre de la etiqueta, y afecta a todos 


los elementos que tienen dicha etiqueta, como en estos ejemplos: 


Un conjunto de reglas o estilo se puede aplicar a varios selectores, cada uno de ellos se 
separan con comas. Además, aspectos adicionales de cada elemento se puedan poner en 


reglas adicionales por separado. 
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Selector descendente: indica que el estilo se aplicará a una etiqueta de un 
determinado tipo, siempre que ésta esté contenida en algún nivel dentro de otra de otro 


determinado tipo indicado. 


Esta regla se aplica a todos los selectores <span> que se encuentran dentro de <a>, por 


ejemplo, en el siguiente código: 


ON ARCHIVO EXTERNO 


PROGRAMACION TI 


href= SBB SUMILLA 


Se veria si: 


PROGRAMACION II 
SUMILLA 


FIGURA Nº 01-013: Aplicando Estilos, selectores descendentes CSS 


Se puede anidar de la siguiente forma: 
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En este caso se aplicará la regla a los elementos de tipo em (siempre se aplica al último 
elemento) que este en algún nivel dentro de la etiqueta <span>, que además este esté 


dentro de <a> y que este esté dentro de <p> 


Selector individual: El valor del atributo id identifica de manera única a un elemento 
en todo el documento, esto significa que no puede ser duplicado. Para referenciar un 
elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser 


declarada con el símbolo & al frente del valor que usamos para identificar el elemento: 


charset= 
PROBANDO ESTILOS CSS CON EL ATRIBUTO ID 


href= 


PROGRAMACION II 


Selector de clase: afecta a todos los elementos calificados dentro de una clase, con 
class dentro del código HTML. Se debe declarar la regla CSS con un punto antes del 


nombre: 


1 1 font-size: 20px + 


El código HTML: 


ESTILOS CSS CON EL ATRIBUTO ID 
href= 


Mi texto 1 
Mi texto 2 


Mi texto 3 
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Se puede crear una regla que referencia la clase Ilamada texto1 pero solo para los 
elementos de tipo <p>. Si cualquier otro elemento tiene el mismo valor en su atributo 


class no será modificado por esta regla en particular: 


Selectores utilizando cualquier atributo: La última versión de CSS ha incorporado 
nuevas formas de referenciar elementos HTML. Uno de ellas es el Selector de Atributo. 
Ahora podemos referenciar un elemento no solo por los atributos id y class sino también 
através de cualquier otro atributo, la siguiente regla se aplica al elemento <p> que tienen 


un atributo llamado name. 


1.2.5. CSS: Fuentes web 


“El Web Open Font Format (WOFF) es un formato de tipo de letra para usarse en 
páginas web. Fue desarrollado durante el afio 2009,2 y está en el proceso de 
normalización como una recomendación por el Grupo de Trabajo de Tipos de Letra 
Web del World Wide Web Consortium (W30).3 En su mayorta, WOFF contiene 
tipografias OpenType o TrueType con compresión, además de metadatos. Su objetivo 
es permitir la distribución de tipografias desde un servidor a un equipo cliente en una 


red, en favor del ancho de banda” 


(https://es. wikipedia.org/wiki/Web Open Font Format). 


Para crear fuentes WOFF se puede utilizar webs como Font Squirrel( 


https://www fontsquirrel.com/tools/webfont-generator ) que permite subir una fuente TTF 
u OTFy se descarga la misma fuente en los formatos WOFF2, WOFF, EOT y SVG. 


La regla arroba Qfont-face 


Esto permite utilizar fuentes web mediante el uso de la regla arroba Ofont-face. 
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font-family: 
since ujril( (ES) 
spc wii c.eot?Hiefix') format( 
url( 11 «WC ) format( De 
url( a ) format('t 5 
url( ) format( ds 


font-weight: 
font-style: 


] hit 
font-family: 
font-size: 2.5em; 

font-weight: 


En La regla (Dfont-face: 


” La propiedad font-family establece el nombre con el que vas a referirte a la 
fuente, se puede poner cualquier nombre. Si el nombre contiene espacios en 


blanco, es necesario escribir el nombre entre comillas. 


Y La propiedad src especifican las rutas del fichero de la fuente, la url() apunta a 
un archivo de tipo de letra que tenemos que importar a nuestro CSS y el formato 


de cada archivo de tipo de letra (format). 


Una vez establecido el nombre de la fuente, se puede hacer referencia a ella en las 


propiedades font-family. 
Google Fonts / Google Fonts API 


Google tiene el servicio de alojamiento de fuentes libres, Google 


Fonts(https://fonts.google.com/) y permite descargar las fuentes en formato TTF. 


4B Google Fonts 
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1.3. Entornos de desarrollo web 


Para el disefio de una página web bastaría con el bloc de notas o cualquier otro editor de 
texto básico de la computadora, pero requeriría de más esfuerzo y tiempo, por lo que en 
necesariamente recurrir a editores de código que permita integrar HTML, CSS, 
JavaScript, PHP entre otros lenguajes de programación para desarrollar soluciones web 


de manera más intuitiva. 
Algunos editores de código para el entorno de desarrollo web: 


Y” Visual Studio Code 
Sublime Text 
Atom 
Notepad++ 
CoffeCup HTML Editor 
TextMate 
” NetBeans 
En Este libro para el desarrollo de los ejemplos y soluciones web utilizaremos el Visual 
Studio Code 


NR N 


1.3.1. Visual Studio Code 


Este editor de código gratuito desarrollado por Microsoft, es una herramienta 
multiplataforma, intuitiva, completo para el diseio de soluciones web, permite integrar 


extensiones, librería, entre otros que facilita la codificación y disefio. 


File Edit Selection View Go Run Terminal Help 


» INSTALLED 
Pylance 


Reload Required dO) & 


pe Jupyter 


4 


om Jupyter Cell Tags 
upyte E 

Bem Jupyter Keymap 
upyter res 

qu 


FIGURA Nº 01-014: Entorno de desarrollo Visual Studio Code 
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Para utilizar descargar de su portal: 
https: //code.visualstudio.com/ 


tps://code.visualstudio.com 
código de estudio visual Docu 


4 Descargar 


Edición de 
código. 
| Redefinido. 


Descargar para Windows 


Construa 


FIGURA Nº 01-015: Pagina para descargar Visual Studio Code 


Una vez descargado su instalación es sencillo e intuitivo: 


Eo<| Instalar - Microsoft Visual Studio Code (User) — x 
Acuerdo de Licencia 
Es importante que lea la siguiente información antes de continuar. 


Por favor, lea el siguiente acuerdo de licencia. Debe aceptar las dáusulas de este 
acuerdo antes de continuar con la instalación. 


Esta licencia se aplica al producto Visual Studio Code. El 

código fuente para Visual Studio Code está disponible en 
https://github.com/Microsoft/vscode según el acuerdo de 
licencia del MIT en 
https://github.com/microsoft/vscode/blob/master/LICENSE.txt. 
Encontrará información adicional sobre licencias en nuestras 
preguntas frecuentes en v 


(9) Acepto el acuerdo 
(O No acepto el acuerdo 


Siguiente > Cancelar 


FIGURA Nº 01-015: Para instalar Visual Studio Code, aceptar el acuerdo y siguiente, 


siguiente... 
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Entorno de trabajo del Visual Studio Code 
File Edit Selection View Go Run Terminal Help Welcome - Visual Studio Code 


Welcome X 


Visual Studio Code 


Editing evolve 


Start 


FIGURA Nº 01-016: Ventana principal del Visual Studio Code con su menú e 


iconos de acceso rápido (1,2,3,4,5) 


Los iconos de acceso rápido: el 1 permite ver los archivos de trabajo en el directorio 
actual, el 2 permite hacer búsquedas, el 4 permite ejecutar código, el 5 permite instalar 


extensiones 
Permite trabajar con dos tipos de áreas de trabajo: 
Carpetas 


El área de trabajo más utilizado de Visual Studio Code es una carpeta con todo su 


contenido incluido las subcarpetas. 


Para abrir una carpeta elegir la opción del menú Archivo > Abrir Carpeta...y 
seleccionar la carpeta que se requiera como carpeta raíz del área de trabajo o sino 


arrastrar a la ventana 


Edit Selection View Go Run Terminal 


Li New Text File Ctrl+N 
New File... Ctri+ Alt+ Windows+N 


New Window Ctrl+Shift+N 


Open File... Ctri+O 


Open Folder... rn+K Ctrl+O 


Open Workspace from File... 


FIGURA Nº 01-017: Menú Archivo > Abrir Carpeta 
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Espacios de trabajo 


Se puede crear áreas de trabajo con varias carpetas distintas, para ello ir a la opción del 


menú Archivo > Agregar carpeta al área de trabajo ... 


File Edit Selection View Go Run Terminal Help 


O New Text File Ctrl+N 


New File... Ctrl+ Alt+ Windows+N 


New Window Ctrl+Shift+N 


Open File... Ctrl+O 
Open Folder... Ctrl+K Ctrl+O 
Open Workspace from File... 


Open Recent 


Add Folder to Workspace... 


Save Workspace As... 


FIGURA Nº 01-018: Menú Archivo > Agregar carpeta al área de 


trabajo... 


Para guardar el área de trabajo seleccionar la opción de menú Archivo > Guardar área 


de trabajo como .... 


1.3.2. Extensiones en Visual Studio Code 


Las extensiones permiten ampliar las características del Visual Studio Code. Para agregar 


una nueva extensión hacer click en el icono 1 sefialado en la FIGURA Nº 01-016 


File Edit Selection View Go Run Terminal Help 


live serverl 


Live Server 


Live Server Preview 


Live Server (Five Server) 


Install 


FIGURA Nº 01-019: Icono para agregar nuevas extensiones 
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Algunas extensiones de utilidad 


Live Server 


Esta extensión crea un pequefio servidor local para que puedas ver lo que estás haciendo 


y se actualice automáticamente con cada cambio. 


File Edit Selection 


“ OPEN EDITORS 
JS 11 canvas,s 
X <> 15 examen en IF 
15 examen en | 
<> 12 camto comp 
JS 12 carrto comp 


w JAVASCRIPT 


<> 08 POO.html 
JS 08 POOjs 
JS 09 Objetos.js 
canvas.css 
canvas.html 
canvas,js 
2 carrito compras. 
12 carrito compras. 
12 carrito compras. 
12 carrnto compras. 
15 examen en linea 
15 examen en linea 
15 examen en linea 


<> 15 examen en linea. ur 


JS 15 examen en linea;s 


View Go Run 


Open with Live Server 


Open to the 
Open With... 


Reveal in File Explorer 


Terminal 


AlR+L AR+O 


Shift+Akt+R 


Open in Integrated Terminal 


Select for Compare 
Open Timeline 


Cut 
Copy 
Copy Path 


Copy Relative Path 


Rename... 


Delete 


Ctrl+X 
Ctrl+C 


Shift+Alt+C 
Ctrl+K Ctrl+Shift+C 


F2 


Delete 


15 examen en | 


<> 15 exa 


FIGURA Nº 01-020: El Live Server permite crear un servidor local que se 


actualiza automáticamente según realizas cambios en el código y grabas 


Prettier 


Esta extensión permite formatear el código según las reglas de cada lenguaje. Soporta la 


sintaxis de una gran cantidad de lenguajes, como JavaScript, JSX, Flow, TypeScript, 
JSON, HTML, Vue, Angular, CSS, Less, SCSS, GraphQL, MarkDown, CommonMark, 


MDX y YAML. Prettier 
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Indent rainbow 


Esta extensión permite indicarte a través de barras de colores en qué nivel de indentación 


está el código y esto ayuda a que sea más fácil de leer. 
Eslint 


Esta extensión para JavaScript ayuda a encontrar errores de sintaxis, lógica o guías de 


estilo en el código y sugiere las posibles soluciones. 
SVG 


Esta extensión ayuda con la sintaxis de SVG, resalta las coordenadas y el autocompletado 


de sintaxis, permite pre visualizar SVG. 
La documentación detallada del Visual Studion Code en: 


https://code.visualstudio.com/docs 


1.4. Ejemplos> 


1.4.1. Creación de Login con HTML y 


Se creará este diseho: 


USER001 


LOGIN 


FIGURA Nº 01-021: Disefio de un Login con HTML y CSS 
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Para empezar, creamos una carpeta “Login” en cualquiera parte de la computadora, 


luego arrastramos a la ventana de Visual Studio Code 


E x) File Edit Selection View Go 


x] Welcome X 


Pcolve & Q 


il] 


FIGURA Nº 01-022: Se crea la carpeta en el escritorio y arrastrar a la ventana del 
Visual Studio Code 


En la parte izquierda aparece la carpeta Login, dentro de ello crear los archivos: 
login.html y style.css, para ello hacer click en el icono de New file..., tal como se 


muestra en la FIGURA Nº 01-0293: 


=“) File Edit Selection View Go Run Terminal Help 


»” OPEN EDITORS 
*] welcome 
login.html 
X * ctyle.css 


vw LOGIN 


login.html 
New File... 


* style.css 


FIGURA Nº 01-023: Dentro de la carpeta se crea los archivos login.html y style.css 
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Creamos la estructura básica de una página en login.html, para ello el Visual Studio 
Code nos ayuda escribiendo en el archivo “html” y autocompleta desplegando un menú 


tal como se muestra en la FIGURA Nº 01-024 
e login.html - Login - Visual Studio Code 


login.html € f styl 


£& html Emmet Abbreviation 


£ html:5 
é html:xml 
[ | teenyicons-html5 


FIGURA Nº 01-024: Al escribir html] dentro del archivo, Visual Studio Code muestra un 


menú desplegable lo cual se selecciona html:5 


Una vez seleccionado html:5, automáticamente se crea un disefio básico de una página 
HTML, tal como se ve en la FIGURA Nº 01-025: 


loginhtml €  * stylecs 


& html 

DOCTYPE html 

html lang= 

head 
meta charset= 
meta http-equiv= content= 
meta name= content= 
title>Document</title 

head 

body 


body 
html) 


FIGURA Nº 01-025: Código HTML básico de una página creado con automáticamente 


con Visual Studio Code 
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Para crear el disefio de la página mostrado en la FIGURA Nº 01-021, se agregará las 


etiquetas HTML que se requieran dentro del cuerpo <body>, en este caso: 


Vá 


Vá 
Vá 
Vá 
Vá 


U 


Un formulario<form></from> 

Una etiqueta para poner el titulo <h1></h1> 

Una etiqueta de tipo texto <input type="text" name="" id=""> 

Una etiqueta de tipo password <input type="password" name="" id=""> 


n button <button type="submit"></button> 


A cada uno de ellos cambiaremos y agregaremos propiedades, atributos, como id, name 


entre otros, así mismo agregamos el link del archivo que contiene al CSS. 


FIGURA Nº 01-026: Código HTML de la estructura de la página 


Para visualizar el disefio lo abrimos en un explorador web, en este caso en Google 


Chrome y se visualiza, así como se muestra en la FIGURA Nº 01-027. 


x + 


ttp://127.0.0.1:5500/login.html?txtUsuario=8ttxtPassword 


Acceso al Sitema 


usuario ||C ontrasefia | ACCESO | 


FIGURA Nº 01-027: Disefo HTML visualizado en un explorador web 
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Ya se tiene los controles del formulario, pero no se visualiza como el disefio de la FIGURA 
Nº 01-021, para ello en el archivo style.css daremos estilos a las etiquetas y controles del 


formulario de la página. 


Maquetación de la página con CSS, en el archivo style.css. 


/*estilo por etiqueta HTML*/ 
html, body 
height: 100%; /*el body y el html ocupan el alto al 100% */ 


/*estilo por etiqueta*/ 
body 
margin: O; /*los espacios fuera del contenedor desaparecen*/ 


padding:0;/*los espacios dentro del contenedor desaparecen*/ 
background-color: blueviolet; /*color de fondo del body*/ 


/*centrar vertical y horizontalmente*/ 
display :flex; 

flex-direction: row; 

flex-wrap: wrap; 

justify-content: 


/*estilo por id*/ 
tform-logint 


width: 300px; /*el ancho del formulario a 300px*/ 
height: 400px; /*el alto del formulario a 400px*/ 
background-color: blue; /*color del formulario a azul*/ 


/*estilo por clase*/ 

-«form-titulo( 
color:$000;/*color del titulo de formulario negro*/ 
text-transform: uppercase;/*El texto transforma a mayuscula*/ 


font-weight: 500;/*el peso de la fuente(o que tan negrita) */ 
font-size: 30px;/*tamafio de la fuente*/ 
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border:0; 
background: 
display: 
margin: 20px 


padding: 14px 10px; 


text-align: 
border: 2px 


width: 200px; 
outline: E 
color: = 
border-radius: 24px; 
transition: 0.255; 


E [type= 

[type= 
width: 270px; 
border-color: 


border:0; 
background: 
cursor: 


background: 
color: 
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Para visualizar el resultado final del diseão, click derecho en el archivo dentro del Visual 
Studio Code y seleccionar Open with Live Server tal como se muestra en la FIGURA Nº 


01-028. 


File Edit Selection View Go Run Terminal Help 


(O EXPLORER ... loginhtml X 


“ OPEN EDITORS 


x login.html 


” 001 LOGIN CON HTMI Y CSS 


login.html 
Open with Live Server Alt+L AR+O 


Open to the Side Ctrl+Enter 


Open With... 


FIGURA Nº 01-028: Click derecho en el archivo para visualizar el resultado final 


El resultado final se mostrará como en las FIGURAS Nº 01-029, 01-030, 01-031, 01-032. 


con sus diferentes efectos 


USER001 


FIGURA Nº 01-029: Disehãio final 
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USER001 


FIGURA Nº 01-030: Al recibir el enfoque el primer text aumenta su tamafio y cambia 


de color de contorno 


FIGURA Nº 01-031: Al recibir el enfoque el segundo text aumenta su tamafio y cambia 


de color de contorno 


USER001 


FIGURA Nº 01-032: Al pasar el mouse por encima del botón cambia de color a blanco y 


de puntero del mouse 
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1.5. Disefio de una página 
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Realizaremos el disefio de una página tal como se muestra en la FIGURA Nº 01-033, 


utilizando los conceptos de HTML, CSS 


Representantes Gestion 2015-2016 


PRESIDENTE - ing. Elmer Santiago 
Chuquiyauni Saldivar. 


DIRECTORES. 


* Sr. Antonio Orozco Martinez (sector 1 
San Luis) 


» Se, Genaro Carbajal Leandro (sector 7 
Sam Luis) 


» Prof. Milton Cesar Pacheco Tolentino ( 
sector 3 San Luis 


* Sr. Juan López Espinaza (sector 4 San 
Luis) 


* Prof. Mesias Ureta Chávez (sector 5 
Luis). 


ft > vilas 


FIGURA Nº 01-033: Disefão de página web estática 
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DESARROLLO 


1. Crear el bosquejo de la página con HTML, con todas las etiquetas necesarias, 


dando nombre de clase e id: 


charset="utf-8" 
rel="stylesheet” href="style.css” 


rel="stylesheet” 
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined 
-opsz,wght,FILL,GRADE2O. . 48,100. .700,0..1,-50..200" 


EMAPA SAN LUIS S.A 


id=" container” 


id="titulo cabecera” 
src="images/logo emapai.jpg” id="logo” 
Emapa San Luis S.A. 
El Agua que tomas es el fruto de tu 


esfuerzo 


Inicio 
Quienes Somos 
Institucional 
Directorio 


id="portada” 
id="portada texto” 
El agua que consume los 5 sectores de San Luis viene 
desde la Laguna Verde Cocha 
href="&" class="galeria fotos">Galeria Fotos 
&nbsp 
“images/flecha galeria fotos.png” 


alt="" 
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class="material-symbols- 
outlined">event note 
Historia de Emapa San Luis S. A. 


EMAPA SAN LUIS S.A, fue creada el 14 de Enero de 
1994 como empresa prestadora de servicio de agua potable y 
alcantarillado, con personeria jurídica de derecho Privado inscrito en 
el Registro de personas Jurídicas. Se crea por la indiferencia, la 
inoperancia y falta de capacidad de gestión de las instituciones 
responsables de la prestación de los servicios de agua potable y 
alcantarillado, al naciente Pueblo de San Luis. 


Ante la inminente carencia de la prestación del 
servicio de agua potable y alcantarillado, los pobladores de San Luis 
se organizan en un comité central de agua y desagiúe, bajo la presidencia 
del ciudadano. Cesar Modesto Cornejo, en busca de la prestación del 
servicio no ven mejor alternativa de autofinanciar sus obras, donde 
aparece la mano milagrosa de un Sacerdote, más conocido como: PADRE 
PACO, párroco de la iglesia Santa Maria de Fátima de Paucarbamba, 
nuestros esfuerzos y sacrificios hoy se plasma en una Empresa pujante 
con visión de ser una Empresa competitiva con las demás que existen en 


nuestro departamento brindándoles agua de alta calidad con tarifas 


sociales, sin fines de lucro, lo manifiesta su Gerente General : Luis 
E. Lavado Mallqui 


La Empresa Administradora de Servicios de 
Agua Potable y Alcantarillado de San Luis, cuya sigla es  (EMAPA SAN 
LUIS S.A.), cuenta con persona jurídica de derecho privado, constituida 
por ante los registros públicos de Huánuco, inscrita en la Partida 
Electrónica 11002086 del Registro de Personas Jurídicas - LIBRO ULTIMO 
DE SOCIEDADES. 


PERSONAL OPERATIVO 


src="SWG/arrow left FILLO wght400 GRADO opsz48.svg” 
id="flecha isquierda” 


49 


CAPÍTULO |: Disefio de páginas web frontend con HTML y CSS 


>Representantes Gestion 2015-2016</p 


p>PRESIDENTE : Ing. Elmer Santiago 
Chuquiyauri Saldívar.</p 
/>DIRECTORES. </f 
> Sr. Antonio Orozco Martinez (sector 1 San 
Luis)</p 
Sr. Genaro Carbajal Leandro (sector 2 San 
Luis)</p 
Prof. Milton Cesar Pacheco Tolentino ( 
sector 3 San Luis) 
Sr. Juan López Espinoza (sector 4 San 
Luis)</p 
Prof. Mesias Ureta Chávez (sector 5 San 
Luis). 


id= i 
hi>DIRECCION Y TELEFONO</h1 
Av. Jose Carlos Mariategui Mz. V- 


San luis Sector 3-Amarilis 
Telefono: (8062) 280131 
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id= 
DIRECTORIO DE EMERGENCIA 


Presidet 


Gerente: 
Cajerf: 
Vigilant 


Dotador 
Dotador 
Dotador 
Dotador 


Visualizando en el Google Chrome se vería, así como en la FIGURA Nº 01-034 


e: 


+ 


R1: 
R2: 
R3: 
R4: 


945784578 
975485755 
901454588 
962457845 


945885478 
956878855 
958744444 
960457845 
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Emapa San Luis S.A. 


El Agua que tomas es el fruto de tu esfuerzo 


El agua que comum bos $ sectores de Sam Luis vácme desde ls Laguna Vende Coca Cadeia Foto 
event note Historia de Emapa San Luis S. A. 


EMAPA SAN LUIS S.A, fuc cocada ci 14 de Enero de 194 coro comprosa prostaduca de servício de agua potable y alcastariiado. cos personcria juridica de derecho Privado inscrito cn cl Regatro de personas Jurídicas Sc 
cerca por la indifcrencia, às inoperancia y falta de capucadad de gostiim de las institucmones respomesblos de Is peestaciõms de los servicios de agua potable y alcamtarillado, al nacicuto Puchlo de Sam Less 


Madi la ireminento carencia de la prestacida del servicio de agua polabio y abcasiscilado, los polbladores de San Leis sc organizam co um comité cortical de agua y desagõe, bajo e prosidencia del casdadamo. Cosas Modesto 


Fátima de Pascarbamba. escstroms csfucrnos y sacrificias hoy se plasma cs ums Empecss puto com vosim de scr ums Empeces competitiva com las domás que existes en nucsiro departamento 
com tan socualos, sm fincs de hacro, do mamificsta sa Ciorcate Gencral : Lis E. Lavado Mallgui 


La Empresa Administradora de Servicias de Agus Putuble y Alcantarillado de San Luis, cuya sígla es (EMAPA SAN LUIS S.A.) cuenta con peruma juriáica de derecho privado, comstsiida por ante los registros públicos de 
Haímuco, inscrsts en la Pastids Electrónica 1 IOMD0S6 del Registro de Personas Juridacas - LIBRO ULTIMO DE SOCIEDADES. 


PERSONAL OPERATIVO 


Representantes Gestios 2015-016 

PRESIDENTE : leg Eincr Santiago Clhuqueyauei Sablivar 
DIRECTORES. 

+ Se Atom Oruzco Martinez (sector | Sam Luis) 

+ Se. Genaro Carbagal Leandro (sector 2 Sam Luis) 

+ Prof. Milton Cesar Pacheco Tolentino ( sector 3 Sam Luis) 
+ Se. Juss López Espinoza (sector 4 San Luis) 


+ Prof. Mesias Lvcta Chávez (sector 5 Sam Luis) 


GORE 


DIRECCION Y TELEFONO 


Av. Jose Carhos Maristcyas Mz V- Li 04 
Sam buis Sector 3-Armarilis 


Telcfomo (062) 28013 


Fotos 


= Ie 


DIRECTORIO DE EMERGENCIA 


e Presadeio SASTEASTE 
e Crente, OTS4ASTSS 

+ Cojenja: GOI ASASES 

* Nisto SGDASTSAS 
. a4SEES4T 
e Ditados ED 9SGa7EASS 
e Detador Ri GGOASTRAS 


FIGURA Nº 01-034: Página web estática sin CSS 


2. Formatearlo y hacer el disefio de la página mediante CSS. 
Se crea un archivo style.css en la cual realizaremos lo siguiente: 
1. Fuentes externo. 


2. Definición de los estilos principales de la página (ancho de la página web, color 


de fondo, color de texto predeterminado). 
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3. Encabezado y enlaces de navegación. 
4. Banner de la laguna Verde Chocha 
5. Sección principal del cuerpo de la página, en el centro. 


6. Pie de página. 


Fuentes externos 


Fontsquirrel(https://www.fontsquirrel.com/tools/webfont-generator) permite generar 
fuentes para utilizarlos en nuestra página web, en este caso tenemos dos fuentes 


externas: 


Y BallparkWeiner; 


” Dayrom. 


FIGURA Nº 01-035: Definición de las Fuentes externas 
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Definir los estilos principales 


Se define los estilos generales para todo el diseãio de la página, tendrá una imagen de 
fondo, la fuente y el color del texto, establecer el tamafio de la página centrado en la 
pantalla, color de fondo degradado, etc. tal como se muestra en las FIGURAS del Nº o1- 
036 AL Nº 01-041 


body£ 
background: url 
background-color: [] 
font-family: | 
color: [lhwb(120 1% 95%); 
background: linear-gradient(135deg, s9boba7 23%, Mhuwb(156 59% 7%) 100%); 


8 
| 


fcontainerf 
width: 73%; 
margin: 

1 

J 


section hi, footer hi, nav af 
font-family: Dayrom, 
font-weight: = 
text-transform: 


headerf 
background: url 
width: 88%; 
padding: 10px; 
! 


Ftitulo cabeceraf 
display: 
width: 100%; 


1 
J 


header h1f 
font-family: 
font-size: 2.5em; 


font-weight: 
1 
J 


Flogo, header h1f 
display: 
margin-bottom: Opx; 

- 

> 


Hlogof 

border-radius: 50%; 
1 
Í 


header h2f 
font-family: Dayrom, 
font-size: 1.1em; 
margin-top: Opx; 
font-weight: 


FIGURA Nº 01-036: Estilos 
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inline-block; 
100%; 
t-align:lefts; 


inline-block; 


RE: 15px; 


[]14181818; 
ng-bottom: 3px; 


none; 


a:hoverf 
[]%760001; 
rder-bottom: 3px solid []4760001; 


Hportadaf 


url('images/verdecocha.jpg') no-repeat; 
relative; 
opx 4px 4px [lhwb(212 6% 15% / 0.37); 


Hportada textof 
position: absolute; 


FIGURA Nº 01-037: Estilos 
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galeria fotosf 
jisplay: inline-block; 
25 px; 


n: absolute; 


3: url('images/galeria fotos.png') repeat-x; 
1px solid [] 760001; 


á 1.2em; 
align: center; 
padding: 3px 8px Opx 8px; 
color: Muhite; 
ext-decoration: none; 


.galeria fotos img( 


border: O; 


article, asidef 
display: inline-block; 
“tical-align: top; 
gn: justify; 


articlef 


A+ 


vidth: 61%; 


.icono titulo( 


ertical 


article pf 


Ennt-cIZE 


article hif 
font-size: 0.9em; 


color: [lblue; 
font-family: 'Gill Sans", 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 


FIGURA Nº 01-0938: Estilos 
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position: 

width: 25%; 
background-color: 
box-shadow: Opx 2 
border-radius: 5px; 
padding: 10px; 
color: H 
font-size: 6.9em; 


position: 
top: 189p 


text-align: 


border: 1px 
border-radius: 50%; 


margin-right: 5px; 
background: 


padding-top: 25px; 
width: 90%; 


> 


font-size: 


font-size: 


display: 
vertical-align: 


FIGURA Nº 01-039: Estilos 
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border: 1px 


border-radius: 3 


display: 
vertical-align: 
margin-top: 0; 
width: 48%; 


padding-left: 2px; 


text-decoration: 
color: [] 


display: 
zoom: 1; 


font-size: 1.1em; 


margin-top: 5px; 
padding: -4px; 


FIGURA Nº 01-040: Estilos 
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FIGURA Nº 01-041: Estilos 


Fundamentos de 
JavaScript 
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2.1. JavaScript 


JavaScript es un lenguaje de programación de scripts de propósito general, fue creado 


por la emplea Netscape.2.1 


2.1.1. Variables, constantes, operadores, 
parseo 


Variables 


En JavaScript las variables se declaran con var, let y dependiendo del tipo de valor que 
se asigne asumirá como: numérico, string, boolean, etc, luego de cada sentencia no es 
necesario el punto y coma “;” pero es recomendable, para consignar algún comentario en 
nuestro código se utiliza “//” en comentarios de una sola línea y de varias líneas con 


“/*comentario*/” 


nombre= 
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La diferencia de declarar variables con var y let está en el alcance, variables declarado 
con let solo tiene alcance en el bloque en donde se declara, las variables declarado con 
var tienen mayor alcance local o global, en el siguiente ejemplo la variable i se declaró 


con let y tendrá alcance solo dentro del if. 


at ralea al pal 
=: 


j 


Constantes 


Las variables o expresiones que asumirán un solo valor se declaran con const 


Algunos operadores: 


Operadores de asignación 


“«» 


El operador permite asignar valores, se podría tener variantes se asignación: 
Asignacion de adicion(x+=y) asignación de resta(x-=y), asignación de 
multiplicacio(x*=y) asignación de división(x/=y), asignación de residuo(x%=y), entre 


otras variantes. 
Operadores de comparación 


Los operadores de comparación son aquellos que permite generar una proposición lógica 
de verdadero o falso: Igual(==), no es igual(!=), estrictamente igual(===) hasta el tipo 
de dato de los operandos, desigualdad estricta (!==) hasta el mismo tipo de datos de los 


operandos, mayor que(>), mayor o igual que(>=), menor que(<), menor o igual que(<=) 
Operadores aritméticos 


Los operadores aritméticos más utilizados: suma(+), resta(-), multiplicación(*), 


división(/), residuo(%), incremento(++), decremento(--). 
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Operadores lógicos 


Los operadores lógicos permiten generar proposiciones combinadas a partir de 


proposiciones simples: and(&8:), or(||), NOT(!) 
Operador condicional ternario 


El operador condicional ternario permite evaluar una proposición, dependiendo del 


valor de verdad realizara acciones, sintaxis: 
Proposición Accioni: accion2 
Si la proposición es verdadera realizara la accion1 y si es falso realizara la accion2 


x=30; 
y=15; 


x%y==0? console. log(” x ivisib] ):console.1log( 


De acuerdo a los valores de x e y, imprime “x es divisible por y” 


Parseo 


Cuando se tiene variables que están asignado a un determinado tipo de datos (entero, 
string, float, etc.) y se requiera realizar alguna operación, para ello los operadores tienen 
que ser del mismo tipo, por lo que necesito hacer un cambio de tipo de dato(parseo), para 
ello se utiliza funciones predeterminado del JavaScript: .parselInt(string), 


parseFloat(string), .toStringO 
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2.2. Arroglos y objetos — 


Arreglos 


Los arreglos en JavaScript son estructuras que permite almacenar datos u otras 
estructuras y administrarlo atreves de su índice (posición en el arreglo que inicia desde 
o), para declararlos se utiliza los corchetes [ ]. A diferencia de otros lenguajes los arreglos 
en JavaScript permiten almacenar datos de diferentes tipos, algunos ejemplos que se 


muestra a continuación: 


Para acceder a cualquier elemento de un array se utiliza su índice, por ejemplo del array 


661 
1 


vocales si se quiere acceder a la vocal “i” seria: vocales[2], así mismo para obtener el 
tamahio del arreglo se utiliza su propiedad .length. 
Más adelante veremos formas de recorrer todos los elementos del arreglo con bucles y 
otras formas. Algunas operaciones con los elementos de un arreglo: 

Y Cuando se quiere agregar elementos utilizamos array .push(e1,e2,...) 

Y Cuando se quiere eliminar el último elemento utilizamos array.popO 

Y Para afiadir una o varios elementos al inicio del array .unshift(e1,ez,...) 

Y Para eliminar el primer elemento del array.shiftO 
Prueba de estos métodos se puede ver a continuación, donde se crea un arreglo que 


guarda nombre de países: 


. push( 


console. log( 
«pop(); 

console. log( 
«unshift( 


console. log( 
s Spread) 5 
console. log( 
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En la FIGURA Nº 02-001 se puede visualizar el resultado de la impresión en consola de 


los arreglos resultantes después de realizar cada operación. 


Consola 


FIGURA Nº 02-001: Resultado de la impresión en consola 
Para ordenar los elementos de un arreglo se utiliza el método array.sortO, 
Por ejemplo se declara un arreglo de números y al aplicar el método sortQ se ordena tal 


como se muestra en la FIGURA Nº 02-002. 


E dA 20 AE AQ EM 
/5,20,30,45,40,51]; 


b (11) [56, 


» (11) [12, 


FIGURA Nº 02-002: Resultado de aplicar el método sort( a un arreglo 


Hay otros métodos para hacer operaciones con el arreglo por ejemplo concat() que 


permite unir dos arreglos, métodos de búsqueda: 


” filter (filtro) 
find (filtro) 
findIndex() 
includes (valor) 


Vá 
Vá 
Vá 
” indexOf (índice de) 
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Array.filter(filtro) 
Este método Array .filter(filtro) permite encontrar elementos dentro de un arreglo que 
cumplan con cierta condición. Por ejemplo, si se tiene un arreglo donde se guardan 


edades y que quiere obtener los mayores o iguales a 18 afios, hacemos lo siguiente: 


. filter (element 


); 


El resultado se vería como en la FIGURA Nº 02-0093. 


» (11) [56, 


b ( 9 ) [ 


FIGURA Nº 02-003: Resultado de aplicar el método filterQ) a un arreglo 


Array.find(filtro) 

Este método Array.find(filtro) permite encontrar el primer elemento que cumple 
cierta condición en el filtro, en el siguiente ejemplo se tiene un arreglo de países, se 
realiza la búsqueda del país “Brasil” y “Peru”, el primero cuando encuentra imprimirá 


“Brasil”, el segundo como no hay en el arreglo imprimirá “undefined” 


Array.findIndex(filtro) 

Este método Array.findIndex(filtro) permite encontrar el índice del primer 
elemento que cumple cierta condición en el filtro, en el siguiente ejemplo se tiene un 
arreglo de países, se realiza la búsqueda del país “Brasil” y “Peru”, el primero cuando 


CA” 


encuentra imprimirá “2”, el segundo como no hay en el arreglo imprimirá “-1” 
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- findIndex(element=>element== 


- findIndex(element=>element 


Array.includes (valor) 

Este método busca si en el arreglo incluye un elemento, devuelve true si está incluido el 
elemento de lo contrario devuelve false. En el siguiente ejemplo en el arreglo se tiene 
países y se busca “Colombia” con .includes(“Colombia”), el cual nos retornara true y 


de acuerdo al código se imprime en consola true 


- includes( 


)> 


Array .indexOf (valor) 

Este método es parecido al includes(), pero retorna el índice del primer elemento que 
coincide con el valor, si no encuentra retorna -1. El método .lastindexOftvalor) es 
similar, pero retorna el índice contando desde la última posición. En el siguiente ejemplo 


de arreglo de números, numeros. indexOf(12) retorna “3” que pertenece al índice del 


12 en el arreglo. 


Q 


4“ ,- 19 Q 6 m 


24 , & Bo. 7 da | = E é E ho. . 
DD pda do 5 ms al deo p 6 ,:42,47,16,95,4,32]: 


. indexOf(12); 


)5 


Modificar o crear sub arrays 
Para poder modificar el contenido o crear nuevos sub arreglos se pueden utilizar los 
siguientes métodos: 

”. .slice(idexInicio, indexFinal) 

Y”. .splice(idexInicio, size) 

Y”. .splice(idexInicio, size, e1, e2...) 

”. .copyWithin(pos, idexInicio, indexFinal) 

”  fl(element, idexInicio, indexFinal) 
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Array.slice(idexInicio, indexFinal) 


Este método permite crear un arreglo con elementos desde la posición indexInicio 
hasta indexFinal-1. Si no se proporciona el parámetro indexFinal asumirá el ultimo 
índice del arreglo. Este método no genera ningún cambio al arreglo original. En 
el siguiente arreglo de números al aplicar el método numeros.slice(1,6), genera un 


sub arreglo desde el índice 1 hasta 6: [27,3,12,86,12,47]. 


const numeros = [16,27,3,12,86,12,47,16,95,4,32]; 
console. log(numeros); se visualiza array complet: 


numi=numeros.slice(1,6); 
console. log(num1); 
console. log(numeros); 


Array.splice(idexInicio, size) 


Este método permite crear un arreglo con elementos desde la posición indexInicio 
hasta la posición indexInicio+size-1. El Arreglo original ya no tendrá los elementos 
del nuevo. En el arreglo anterior al aplicar el método numeros.splice(3,5), tal como 


se muestra a continuación se verá los resultado como en la FIGURA Nº 02-004. 


onst numeros = [16,27,46,12,86,12,47,16,95,4,32]; 
console. log(numeros); 

const numi=numeros.splice(3,5);// 

console. log(num1i); 

console. log(numeros);, 


» (11) [16, 
» (5) [12, 
+ (6) [16, 


FIGURA Nº 02-004: Resultado de aplicar el método splice() a un arreglo 


A partir de tres parámetros a más indica que son nuevos elementos y se agregara en la 
posición index Inicio, al realizar la operación con este método splice (idexInicio, size, e1, 


e2...) 


const numeros = [16,27,46,12,86,12,47,16,95,4,32]; 
console. log(numeros); 


numi=numeros. a 5 do 


console. log(num1); 
console. log(numeros); 
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Array.copy Within(pos, indexInicial,indexFinal) 

Este método vario el arreglo original en contenido, pero con el mismo tamaão, copia a la 
posición pos para adelante, desde el indexInicial al indexFinal-1 y completa desde 
el último elemento copiado hasta el final del arreglo. En el siguiente ejemplo se tiene un 
arreglo de números, al utilizar el método numero.copy Within(2,3,7); estamos indicando 
que copie a la posición 2 para adelante los números desde la posición 3 hasta la posición 


6, completando el arreglo desde el último elemento copiado hasta el final. 


[16,12,32,18,49,65,65,100,78,41] 


4º 49 AP 5399 40 o coanna 
= 3 Ea A a DE LOS = Mojo, d, 
[16,12,45,32,18,49,65,1 


)3 


Array.fill(element, idexInicio, indexFinal) 


Este método permite rellenar element desde a posición indexInicio a indexFinal-1, 
modificando así el contenido del arreglo original. En el siguiente ejemplo se tiene un 
arreglo de números, al aplicar numero .fill(0,2,7), se está indicando que ponga el valor 


o desde la posición 2 hasta la posición 6. 


Se podría instanciar un arreglo con valores por defecto, para ello aplicando fill). En el 
siguiente ejemplo se instancia un Array con 10 posiciones y con valor por defecto false y 


se le asigna a la constante prendido. 


Array.map() 


Este método permite generar otro arreglo con la misma cantidad de elementos a partir 


del contenido del arreglo sin que se altere este último. 
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En el siguiente ejemplo tenemos un arreglo de promedio, con el .map() se recorre cada 


elemento y se genera un nuevo arreglo con “A” o “D” dependiendo si es >10 0 <=10 


const promPonderado=[14,15,12,10,18,8,9,11,10,15]; 
console. log(promPonderado); 


const condicion= 
promPonderado.map(element=>element>10? 
console. log(condicion); 

console. log(promPonderado); 


Objetos 


Los objetos son estructura de datos que permite almacenar diferentes atributos de un 
elemento o representación del mundo real, por ejemplo: televisor (LG 15”, negro, Full 
HD,...), todo el contenido se encierra entre llaves( ()), cada atributo se representa por: 
nombre:valor y separado por “,”. Para acceder a sus atributos se utiliza los corchetes 
Objeto[“nombre atributo”] To) el punto(.) seguido del 
nombre atributo(Objeto.nombre atributo). 


En el siguiente ejemplo se declara el objeto alumno con sus atributos: 


const alumno=( 
codigo: 
nombre: 
apellido: 
edad:20, 
correo: 
ER 


35 


console. log(alumno); 
console. log(alumno[ ps 
console. log(alumno.nombre) ; 


alumno.apellido= 
console. log(alumno); 


Los objetos aparte de tener atributos también tienen métodos que no son otra cosa que 
funciones que hacen algún tipo de operación. En el ejemplo anterior agregaremos el 


objeto Escuela Profesional ep1, el alumnooot1 pertenece a la ept y en este último 
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objeto agregamos un método verEscuelaNombre(), que permite visualizar el nombre 


de la escuela, tal como se muestra en la 


const epl=( 
Las Colo: 
nombre: 


st alumnod1=( 
codigo: 
nombre: 
apellido: 
edad: 20, 
correo: "Juan(dgmail.com 


ep:ep1, 
verEscuelaNombre 


+ 


console. log(alumno0o1); 
console. log(alumnoB1[ 
console. log(alumno01.ep); 


//se cambia el valor d 
alumnoQ1.apellido="SANTI 

console. log(alumnoB1); 

console. log(alumno01.verEscuelaNombre()); 


En el siguiente grafico se puede ver el resultado de acceder a los atributos del objeto y al 


método verEscuelaNombredQ. 


, (codigo: "02023000210", nombre: "JUAN", apelLido: "MIRANDA SANTIAGO", edad: 
OM", =) 


JUAN 
bfid: "01", nombre: 'INGENTERIA DE SISTEMAS ') 


, fcodigo: '02023000210', nombre: "JUAN", apeliido: "SANTIAGO MIRANDA", orreo: "juanêgmai. c 
om", m) 
INGENIERIA DE SISTEMAS 


FIGURA Nº 02-005: Resultado en consola del ejemplo anterior 
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2.3. 
sentencias de control 


Sentencias simples 


Las sentencias simples son aquellas líneas de código que no cambian el flujo de ejecución 
del programa. Por ejemplo, para hacer un programa que calcule la suma de n números. 
Se solicita los n números atreves del método promptO del Windows y aplicamos la 


formula n(n+1)/2. Estas líneas de código en JavaScript representarían así: 


=prompt( 


=parseInt(n1); 


+1)/2; 


Sentencias de control simple 
Las sentencias de control simple, es la que direccionan el flujo del programa: 
if(proposicion) 
t 


//si proposición es verdadero 


Jelsef 
//si proposición es falso 


) 


Ejemplo 02-001: Realizar un programa que imprima el máximo valor de 5 números 


ingresados. 
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DESARROLLO 


Para este programa solicitamos los 5 números con prompt, asignamos a una variable 
mayor el primer número, luego se compara con los demás: 

Si mayor< na entonces mayor=nz 

Si mayor< ng entonces mayor=n3 

Si mayor< n4 entonces mayor=ng4 


Si mayor< n5 entonces mayor=n5 


Se imprime mayor 


Código en JavaSCript: 


Sentencias de control múltiple 


Las sentencias de control múltiple direccionan el flujo del programa, permiten tener 
múltiples alternativas sobre el valor de comparación de la expresión dada como 


argumento al switch): 


switch(expresión) 
t 
case valor1: 
//sentencia 
Break; 
case valor>: 
//sentencia 
break; 
default: 
//sentencia 
break; 
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Ejemplo 02-002: Realizar un programa que permita capturar la fecha del sistema y a 
partir de ello formatear de la siguiente manera: 
AMARILIS: Domingo 16 DE ABRIL DEL 2023 


DESARROLLO 


Para capturar la fecha del sistema utilizamos el new Date(), .getFullYearQ para 
obtener el afio, .getMonthO para obtener el mes, como empieza en o se le suma más 1, 
-«getDay)O obtiene día de la semana, .getDate() obtiene el día del mes, luego de ello 
utilizamos el switch( para convertir el mes correspondiente en letras: 1="ENERO”, 
2="FEBRERO”.... 


Luego utilizamos otro switch() para pasar el número de la semana a letras: 1=?LUNES”, 
2="MARTES”,... Luego se da formato a la fecha con la salida solicitada tal como se 


muestra en la FIGURA Nº 02-006. 


Código en JavaScript 


Year(); 


etMonth()+1; 
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case 1: 
mesL="ENERO"; 
break; 

case 2: 
mesL="FEBRERO"; 
break; 

case 3: 
mesL="MARZO" ; 
break; 

case 4: 
mesL="ABRIL"; 
break; 


case 5: 
mesL="MAYO" ; 
break; 

case 6: 
mesL=" JUNIO"; 
break; 

case 7: 
mesL="JULIO"; 
break; 

case 8: 
mesL="AGOSTO"; 
break; 

case 9: 
mesL="SETIEMBRE" ; 
break; 

case 10: 
mesL="OCTUBRE"; 
break; 

case 11: 
mesL="NOVIEMBRE"; 
break; 

case 12: 
mesL="DICIEMBRE"; 
break; 

default: 
mesL="": 
break; 


15 
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let diasemanaL="": 


switch(diaSemana)( 


case 1: 
diaSemanaL= 
break; 

case 2: 
diaSemanaL= 
break; 

case 3: 
diaSemanaL= 
break; 

case 4: 
diaSemanaL= 
break; 

case 5 

diaSemanaL= 

break; 

case 
diaSemanaL= 
break; 

case 0: 
diaSemanaL= 
break; 

default: 
diaSemanaL= 
break; 


console. log( ,+diaSemanaL,diaMes, 


sanio); 


La salida del ejemplo en consola se muestra con la FIGURA Nº 02-006 


AMARILIS: Domingo 16 DE ABRIL DEL 2023 


FIGURA Nº 02-006: Resultado en consola del ejemplo 
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2. Sentenios repetitivas — 


Las sentencias que hacen repetir la ejecución de código son: forO, while0, 
doiJwhileO),foreach, etc. 


Las sintaxis de cada uno de ellos se detallan a continuación 


for(condición inicial, condición de salida, variación) 
//sentencia 


) 


while(proposicion) 
t 
//sentencia 


) 


do 
//sentencia 


Fwhile(proposicion); 


Array .forEach(function callback(element,index,Array)()) 


Ejemplo 02-003: Realizar un programa que permita generar aleatoriamente n 
números (n se puede ingresar con prompt ) y los almacena en un arreglo con sus 
respectivos divisores, a partir de ello utilizar el .map( para generar otro arreglo con la 


cantidad de divisores de cana número. 


DESARROLLO 


Para ingresar la cantidad de números utilizamos el prompto, luego almacenamos en 
una variable para luego hacer un casting para pasarlo a un tipo numérico, si el ingreso es 
válido con un bucle for() se genera los números aleatorios con la función de 
Math.randomoQ) y se asigna al atributo valor de un objeto numero, luego de ello se 
saca los divisores de dicho número, para ello se utiliza el bucle dof JAvhileO y se 


almacena en el arreglo divisores del objeto número. 


CAPÍTULO Il: Fundamentos de JavaScript 


Código en JavaScript 


const cantNum=prompt( 


const cN=parseInt(cantNum) ; 


if(typeof cN == 


1 
t 


const numeros=[]; 


for(let i=0;i<cN;i++) 


1 
t 


numero=( 
valor :Math.round(Math.random()*100), 
divisores:[] 


n=numero.valor; 
J=1; 


if(n%j===0) 


numero.divisores.push(j); 


J++s 


thile(j<=n); 


numeros. push (numero) ; 


18 


CAPÍTULO Il: Fundamentos de JavaScript | 79 


EJERCICIOS Nº02-001.- Realizar programas en JavaScript para los siguientes casos: 

1. Determinar el menor y mayor valor de n números. 

2. Realizar un programa para construir la ecuación de una circunferencia a partir 
de 3 puntos. 

3. Hacer una calculadora en letras de tal manera que te realiza las 4 operaciones 
básicas (+,-,*,/). El Ingreso de los números y los operadores se debe realizar en 
letras, Por ejemplo. 

INGRESE EL PRIMER NUMERO.....>>DOS 
INGRESE EL SEGUNDO NUMERO..>>DOCE 
INGRESE EL OPERADOR.............. >>SUMAR 

LA SUMA ES..................... >>CATORCE 


4. Realizar un programa para que factorice un número entero, mayor que 99 
ingresado por el teclado, Por ejemplo. 
INGRESE EL NUMERO .....>>100 
EL NUMERO EN SUS FACTORES PRIMOS ES>>22x5? 
5. Realizar un programa para que evalué una función ingresada por el teclado, Por 
ejemplo. 
INGRESE LA FUNCION>>sen(x)+x 
INGRESE UN VALOR PARA “x”>>0 
EL VALOR DE:f(0)=0 
DESEA SEGUIR EVALUANDO LA FUNCION SI(1)/NO(0)>>1 
INGRESE UN VALOR PARA “x”>>9.1416 
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EL VALOR DE:f(2.1416)=3.1416 
DESEA SEGUIR EVALUANDO LA FUNCION SI(1)/NO(0)>>0 
DESEA INGRESAR OTRA FUNCION SI(1)/NO(0)>>0 
“HASTA PRONTO” 
6. Dado un número entero, determinar si es o no es capicúa. Recuerde que un 
número es capicúa cuando se lee igual de izquierda a derecha que de derecha a 


izquierda. Por ejm. 22, 656, 2332, etc. 


7. Genere números aleatorios enteros de 4 cifras hasta que se obtenga uno que tenga 


sólo cuatro divisores. 


8. El Centro Médico “Pillco Mozo” requiere sistematizar su administración con la 
ayuda de un software, por lo que se necesita gestionar los datos de los pacientes 
(DNI, apellidos y nombres, teléfono, fecha de nacimiento, historial clínico, 
diagnóstico de enfermedades, etc.), personal de salud (DNI, apellidos y nombres, 
titulo, especialidad, tipo de contrato), personal de administración (DNI, apellidos 
y nombres, contrato, área, cargo, etc.). Se necesita tener datos de las 
enfermedades como: nombre, aparato o sistema corporal al que afecta, 
descripción de la enfermedad. Los pacientes pasan por triaje para recabar datos 
como: peso, talla, signos vitales, etc. Luego pasan a medicina general en donde el 
Medico realiza un diagnóstico luego de ello es derivado a las especialidades 
correspondientes para su atención. Se necesita tener el control de citas. Realizar 
el programa en JavaScript que permita sistematizar los requerimientos del 


Centro Médico “Pillco Mozo” 


9. En el proceso de “Bienes y Suministros” de la empresa de turismo “Pata 
Amarilla” que pertenece al área de Administración, se realizan las actividades 
de manera manual, por lo que se requiere sistematizar todo ello con la ayuda de 
un software, el duefio del proceso de "Bienes y Suministros" detalla el 


procedimiento y actividades de cada área: 


Y El proceso involucra cinco (5) áreas: Administración, Logística, Almacén, 


Patrimonio, Áreas usuarias. 


” El área de Logística funciona de la siguiente forma: 
>  Recibe las solicitudes de requerimientos de bienes o suministros de las 
diferentes áreas de la empresa. 


> Cada solicitud tiene un responsable que está adscrito a un área. 
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> Cada solicitud es autorizada por el jefe del área y posteriormente por el área 


de Administración. 


> Dela solicitud se requiere la siguiente información: Número de la solicitud 
(consecutivo), fecha, responsable, área, meta presupuestal. En cada solicitud 
se pueden contener uno o muchos ítems con la siguiente información: 
código, nombre del ítem, cantidad solicitada, unidad de medida, valor 


unitario. 


> Cada ítem es identificado por un código único y es de carácter devolutivo 
(suministro) (útiles de escritorio, útiles de limpieza, etc.) o un bien 


(computadora, escritorio, etc.). 


> Lasolicitud es enviada al área de Logística para atender si es que hay en stock 
o realizar la compra a uno o varios proveedores. Para realizar la compra se 
juntan todas las solicitudes para tener la cantidad total de ítems de cada 


rubro a comprar. 


> Las cotizaciones son realizadas con uno o varios proveedores de los bienes 


solicitados. 


> Para comprar bienes primero se realiza la cotización dos o tres proveedores 
para determinar la mejor oferta en calidad y precio que un proveedor ofrece, 
una vez elegido el proveedor se genera la orden de compra, con los siguientes 
datos: número de la orden de compra, nombre del proveedor al cual se le 
va a realizar la compra, fecha de la orden, monto total de la orden, fecha de 
entrega. Cada orden puede tener asociado uno o varios ítems, cada ítem debe 
tener los siguientes datos: código del ítem, nombre del ítem, cantidad de 


compra, unidad de medida del ítem, valor unitario y sub total. 


> La orden de compra es aprobada por el área de Administración luego el área 


de Logística envía o hace entrega al proveedor elegido. 


” Elárea de Almacén funciona de la siguiente forma: 


> Recepciona los bienes que llegan de los proveedores y distribuye con una 


pecosa a las áreas que realizaron las solicitudes. 


> El proveedor hace entrega a Almacén los ítems detallado en la Orden de 
Compra, para ello adjunta la guía de remisión y factura para su pago 
correspondiente si todo está conforme, se registra una entrada de almacén 


por cada factura relacionada, con los siguientes datos: número de entrada, 
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fecha, número de factura, Proveedor, total bienes, valor total, los ítems 


recibidos con la cantidad respectiva. 


> El área de Almacén hace entrega de los bienes a las diferentes áreas 
solicitantes atreves de una pecosa detallando cada ítem entregado y otros 
datos más como el numero de salida, empleado solicitante del ítem o los 


ítems, cantidad, fecha de salida, fecha de entrega. 
Y Elárea Patrimonio es responsable de: 


> Administrar y controlar la ubicación de los bienes dentro de la empresa, por 
esto antes de que el bien salga del Almacén es codificado y se genera su 


estiquer que va pegado al bien. 


> Cada trabajador tiene a su cargo una o varios bienes, esto permite controlar 


su ubicación. 


Realizar el programa en JavaScript que permita sistematizar todo lo detallado en el 


proceso de “Bienes y Suministros” de la empresa de turismo “Pata Amarilla”. 
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2.5. SON 


JSON (JavaScript Object Notation) es una estructura de datos estándar que permite 
el intercambio de los mismos, es soportado por diferentes lenguajes de programación y 
motores de bases de datos en su almacenamiento. Su amplio uso para el almacenamiento 
e intercambio de datos radica en la sencillez de sus estructuras: (“Clave”: “Valor”+, los 


tipos de datos en valor podrían ser: 


” Cadena 
Numéricos 
Booleanos 
Array 
Objetos 


null 


VS ss 


En el siguiente ejemplo tenemos una representación de datos de un alumno en JSON, 
notar que los atributos van entre doble comilla, el atributo dirección es un objeto en 


formato JSON, el atributo deportes es un arreglo. 


Algunos métodos que permite hacer operaciones con el Objeto JSON: 
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JSON.parse() 


Se le pasa como parámetro una cadena JSON y transforma en un objeto de JavaScript. 
Este método puede tener una función como segundo argumento que podrían 
transformar los valores del primer parámetro antes de retornar. En el siguiente ejemplo 


se declara una constante alumno como cadena y con JSON.parse( lo pasamos a un 
objeto JavaScript 


En la FIGURA Nº 02-007 se puede observar la salida de aplicar el método 
JSON.parsedQ: En la parte (1) se ver la cadena, en la parte (2) se puede observar que 
el tipo de dato de “alumno” es string, en la parte (3) luego de aplicar el método se 
visualiza el objeto JavaScript, en la parte (4) se observa el tipo de dato de “dato” que es 


object 
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z Espinoza”, 
“direccion":( 
“departamento”: "HUANCUO”, 
“provincia”: "HUANICO”, 
“distrito”;"AMARILIS”, 
“ubicacion":"jr ricardo palma 41234" 
+, 
": "978458745", 
juan648gmail.com”, 
"Ingenieria de Sistemas”, 
“deportes”: ["Futbol”,"Natacion”,"basketball”] 


UN 4 
"> =; 0 
apellidos: pez Espi 
correo: in649ema 1] 
+ deportes: (' Fut 
> direccion: ( 
ESCUCIa: 
nombre ; 
telefono: 


q 


object 


FIGURA Nº 02-007: Resultado de aplicar el método JSON.parse() 


En el ejemplo anterior con el mismo método JSON.parsed), como segundo parámetro 
lo pasamos una función que convierta con el método toUpperCaseQ a mayúscula los 


atributos que son de tipo string. 


const dato1=)SON.parse(alumno, (key, value) => ( 
if (typeof value D+ 
return value.toUpperCase(); 


, 


return value; 


+) 


console. log(dato1); 


Como resultado se puede observar en la FIGURA Nº 02-008, en donde todos los 


atributos de tipo string se pasó a mayúscula. 
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Consola 


: Object 


FIGURA Nº 02-008: Al aplicar el método JSON.parse() con una función como 


segundo argumento que pasa los atributos de tipo string a mayúscula 


JSON. stringify(objeto[, replacer[, space]]) 


A este método se le pasa como parámetro un objeto JavaScript y lo transforma en una 
cadena JSON, ósea todas las claves encerrado entre comilla doble, también se le puede 
pasar como argumento un array. Además, puede tomar dos argumentos adicionales: el 
primero una función replacer y el segundo un valor String o Number que se utiliza para 
insertar espacio(space) en blanco dentro de la cadena de salida JSON para mejorar su 
legibilidad. Si es de tipo Number, indica el número de espacios a usar como espacios en 
blanco el máximo valor es 10. Los valores menores a O no se toma en cuenta. Si es de tipo 


String, la cadena (o sus 10 primeros caracteres) se utiliza como espacios en blanco 


En el siguiente ejemplo se tiene una colección de objetos con datos de dos alumnos, cada 
uno de ellos tiene un id que los identifica de manera única en la colección, esto nos 


permite hacer modificaciones, eliminar, hacer consultas, entre otros que se requiere. 
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=("0001": 1 
nombre: "JUAN", 
k "Lopez Espinoza”, 
direccion:( 
"departamento" : "HUANCUO”, 
"provincia": "HUANUCO", 
FAT SErsEo = CAMARLEIS, 
"ubicacion":"5r ricardo palma &1234" 
+» 
Dn: "978458745", 
eo: "juan640gmail.com”, 
escuela:"Ingenieria de Sistemas”, 
deportes: ["Futbol","Natacion","basketball"] 
+» 
"0002": 1 
nombre: “MARIA”, 
ipellidos:"Santiago Rivera”, 
eccion:f 
“departamento” : "HUANCUO”", 
"provincia" :"HUANUCO”, 
"distrito" :"HUANUCO”", 
"ubicacion":"dos de mayo F129" 


>, 
Fono: "954865458", 


reo: “mari 123(Qgmail.com”, 
uela:"Ingenieria de Sistemas”, 
deportes: ["agedrez”,"natacion","basketball”] 


)> 
JSON.stringify( 


) 3 


En la FIGURA Nº 02-009 se puede observar la salida de aplicar el método 
JOSN.stringifyO: En la parte (1) se ver la cadena, en la parte (2) se puede observar 


que el tipo de dato de la colección “alumnos” es object, en la parte (3) luego de aplicar 
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el método se visualiza la salida en formato JSON, en la parte (4) se observa el tipo de 


dato de “dato” que es string 


correo: "juan64egmail. com” 
b deportes: (3) ['Futbol', 'Natacion', 'basketball'] 
» direccion: (de | o: "HUANCUO", provincia: 'HUANUCO'*, distrito: 'AMARILIS'*, ubicac: 
escuela: "Ingenieria de Sistemas” 
nombre: "JUAN" 
telefono: "978458745" 
b [[Prototype]]: Object 
v 0002: 
apellidos: "Santiago Rivera" 
correo: "mari 123€gmail.com” 
b deportes: (3) ['agedrez', 'natacion', 'basketball'] 
> direccion: (de : "HUANCUO", provincia: 'HUANUCO', distrito: 'HUANUCO", 
escuela: "Ingenieria de Sistemas” 
nombre: “MARIA” 
telefono: "954865458" 
]: Object 
: Object 


"0001" :("nombre":"JUAN","apellidos":"Lopez Espinoza","direccion": app 
"departamento" : "HUANCUO" , "provincia": "HUANUCO", "distrito":"AMARILIS","“ubicacion":"jr 
ricardo palma 

$1234"), "telefono" :"978458745","correo":"juan646gmail.com","escuela":"Ingenieria de 
Sistemas","deportes":["Futbol","Natacion”","basketball"]),"0002": 

("nombre": "MARIA" ,"apellidos":"Santiago Rivera","direccion": 

"departamento" : "HUANCUO" , "provincia": "HUANUCO", "distrito": "HUANUCO" ,"ubicacion":"dos de 
mayo &129"),"telefono":"954865458","correo":"mari 123€gmail.com","escuela":"Ingenieria de 
Sistemas","deportes":["agedrez","natacion","basketball"])) 


string 


FIGURA Nº 02-009: Resultado de aplicar el método JSON.stringifyO 


En el ejemplo anterior con el mismo método JSON. stringifyO, como segundo 
parâmetro se pasa una función que convierta con el método .toUpperCase() a 


mayúscula los atributos que son de tipo string. 
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function replacer(key, ue ! 
(key ——— apellidc o. f 
Ran, | E 


value; 


El metodo stringify() con dos parametros 
const alumnosi = JSON.stringify(alumnos, replacer); 
console. log(alumnos1); 


En la FIGURA Nº 02-010 se muestra en consola el objeto convertido en formato JSON, 


todos los atributos están encerrados entre comillas dobles. 


Consola 


eles predete minado 


("0001":("nombre" :"JUAN","apellidos":"LOPEZ ESPINOZA","direccion": 

(" departamento” : "HUANCUO”" , "provincia" :"HUANUCO", “distrito”: "AMARILIS”, “ubicacion":"jr 
ricardo palma 

$1234"), "telefono" :"978458745","correo":"juan64e6gmail.com","escuela":"Ingenieria de 
Sistemas","deportes":["Futbol”,"Natacion”","basketball"]+,"0002": 
("nombre": "MARIA", "apellidos”:"SANTIAGO RIVERA","direccion": 

(" departamento” : "HUANCUO”" , "provincia": "HUANUCO", "distrito" :"HUANUCO","ubicacion":"dos de 
mayo $129"),"telefono":"954865458","correo":"mari 123f€gmail.com","escuela":"Ingenieria de 


Sistemas","deportes":["agedrez”,"natacion","basketball"])) 


FIGURA Nº 02-010: Resultado de aplicar el método JSON.stringify(), con un segundo 


argumento como función 


Al mismo ejemplo con el método JSON.stringify(), como segundo parámetro una 
función que convierta con el método .toUpperCase() a mayúscula los atributos que son 


de tipo string, además un tercer parámetro con valor 1, para dar visibilidad a la salida. 


//El metodo stringify() con tres parametros 
const alumnos2 = JSON.stringify(alumnos, replacer,1); 


console. log(alumnos2); 
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En la FIGURA Nº 02-011 se muestra en consola el objeto convertido en formato JSON, 
todos los atributos están encerrados entre comillas dobles, además con una visibilidad 
mejor. 


Consola 


tra 


"0001": + 
“nombre”: “JUAN”, 
"apellidos”: "LOPEZ ESPINO 
"direccion": £4 
“departamento”: “HUANCUO”, 
“provincia”: "HUANUCO”, 
"distrito": "AMARILIS”, 
“ubicacion": "jr ricardo palma 41234" 
+» 
“telefono”: "978458745", 
"correo": "juan646gmail.com”, 
"escuela": "“Ingenieria de Sistemas" 
"deportes": [ 
“Futbol”, 
"Natacion”, 
“basketball” 


“nombre”: “MARIA”, 
"apellidos”: "SANTIAGO RIVERA”, 
"direccion": £ 
“departamento”: "HUANCUO”, 
"provincia": "HUANUCO”, 
"distrito": "HUANUCO”, 
"ubicacion": "dos de mayo &129" 
+» 
“telefono”: "954865458", 
"correo": " i 1236gmail.com”, 
"escuela": "“Ingenieria de Sistemas" 


“agedrez”, 

“"natacion”, 

“basketball” 
] 


1 
É, 


1 
J 


FIGURA Nº 02-o11: Resultado de aplicar el método JSON.stringify(), con un segundo 
argumento como función y un tercer argumento con el valor 1 para una mejor 
visibilidad en la salida 
Nota. - Los archivos que contienen datos en formato JOSN se guardan con la extensión 


* json 
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2.6. Tunciones> 


Las funciones en JavaScript son un bloque de código que realiza algo específico y que 


pueden o no retornar un valor. Se tiene la siguiente sintaxis 


function nombreFuncion(parametro1,parametro2, parametrog,...) 
t 

//bloque de código 

//si retorna un valor 


return valor; 


Para invocarlas o utilizarlas las veces que se requiera a las funciones solo hay que escribir 


su nombre con paréntesis y los parámetros establecidos: 
nombreFuncion(parametro1,parametroz, parametrog,...) 


Si los parámetros son primitivos (numero, string, booleam, etc.), estos son pasadas a la 
función por valor. Si se cambia el valor dentro de la función esto no se refleja fuera. En 
el siguiente ejemplo se declara dos variables: n1=0, n2=3; se le pasa como parámetro a 
la función suma(n1,n2), dentro de la funcion se cambian los valores, estos no es reflejado 


fuera de la función. 


Si los parámetros son objetos, array y se cambian sus atributos o valores dentro de la 
función, estos son reflejados fuera de la función. 
En el siguiente ejemplo se declara el objeto alumnoi con sus atributos nombre: 


“JOSE”, edad:25. La función saludar() recibe como parámetro el objeto alumnor. 
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Dentro de la función se cambia de valor al parâmetro nombre=”PEDRO”, este cambio se 


refleja fuera del ámbito de la función. 


En javaScrip hay tres formas de crear funciones: 
” La primera forma es a través de funciones declaradas 
” La segunda forma es a través de funciones expresadas 


” Latercera forma es a través de funciones flecha 


Funciones declaradas 


La sintaxis de este tipo de funciones se muestra a continuación: 


// Function declaration 
function nombreFucion(parametrol, parametro2,...) 
// bloque de codigo 
return valor retorno 


Estas funciones pueden ser invocadas antes de su definición 


Funciones expresadas 


La sintaxis de este tipo de funciones se muestra a continuación: 


// Function expresada 
const nombreConstante=function (parametrol, parametro2,..)f 
//bloque de codigo 


Estas funciones no pueden ser invocadas antes de su definición. 
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Otra forma de función expresada son las autoejecutables: 


// Function autoejecutable 
(Rimeimonid El 

// bloque de codigo 

1h (0) 6 


Funciones de tipo flecha (arrow function) 


Estas funciones son expresiones más compactas de una función tradicional, se les Ilama 


funcione flecha por que tiene la siguiente sintaxis: 


const nombreConstante = (parami, param2,..) => línea de codigo; 


Se crea la función nombreConstante que acepta parámetros y ejecuta el código que esta 
después de la flecha y retorna un resultado. En el caso que se requiera más líneas de 
código a la derecha de la flecha, se encierra entre 7 + y se utiliza return para devolver 


un valor. 


const nombreConstante = (paraml, param2,..) => ( 
//bloque de codigo 
return valor ) 


Funciones recursivas 


Son aquellas funciones declaradas que se llaman a sí mismo dentro de su definición, 


podría tener la siguiente sintaxis: 


// Function recursiva 


function nombreFucion (parametro) ( 


if (parámetro==1) 
return 1; 
esle 


return nombreFucion (parámetro-1) ; 


) 
Parametros rest en una función 
Cuando no se tiene establecido la cantidad de parámetros de una función, JavaScript 


permite majear ello de manera dinámica estableciendo con parámetros 


rest(... parametro) de la siguiente manera: 
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// Function con parámetros rest 


function nombreFucion(..parametro) ( 


// bloque de codigo 
return valor; 


; 


En este caso “parametro” es un Array, para su gestión utilizamos todos los métodos 
relacionados a ello. 
En el siguiente ejemplo se tiene una función que calcula el promedio de n notas, al 


momento de Ilamar pasamos diferente cantidad de parámetros 


promedio(...nota)( 


=nota.reduce((a,p)=>p+a)/nota. length; 


é) 


console. log(promedio(16,20)); 
console. log(promedio(16,20,18,10)); 
console. log(promedio(12,13,14,15,16)); 


Para este ejemplo se utilizó el método Array.reduced dentro de la función para sumar 


los promedios, este método tiene la siguiente sintaxis: 


Array. reduce (callback (acumulador, valorActual[, 
inquecel, arravilll, valeriniciel|) 


El callback es la función a ejecutar sobre cada elemento del Array a excepción para el 


primero en caso que no se proporciona valorInicial. 


Ejemplo 02-004: Realizar una función en JavaScript que calcule el factorial de un 


número n de manera recursiva. 
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DESARROLLO 
Según definición; el factorial de un numero está representado por n! y se calcula de la 
siguiente manera: n!=1x2x3x4...x(n) donde ne N. 
Por ejemplo: 
5!=1Xx2X9X4X5 = 120 
6!=1x2x3xX4X5xX6 = 720 


El factorial de un numero n se puede definir de esta manera: 


f=1 

fp = fix2 

fa = fax3 

hn = fn-yan 


Esto en matemáticas discretas se plantearía con una definición recursiva de la siguiente 
manera: 


E =1 
ha Nf(n-1) ;vn EN 


Toda definición recursiva siempre tiene condiciones iniciales o de salida, en este caso: 
fi = 1. No establecer esto conllevaría a generarnos un bucle indeterminado. 
La definición recursiva de la suma de los n números enteros seria de la siguiente manera: 


S,/=1 
Ne = S(n-1) +tn,Yn EN 


Con esta definición es fácil implementar una función recursiva que calcule el factorial de 


un numero n tal como se muestra a continuación: 
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(author Elmer Chuquiyauri 
(dversion v1.0 

()param (Number? n 
(return 


function f 
let fact=1; 
if(n==1) 
act 
else 
fact=n*factorial(n-1); 


return fact; 
1 
J 

const n=prompt( 


console.lo 


La suma de n números con una función recursiva estaría implementado de la siguiente 


manera: 


function sumar(n)( 
let suma=0; 
2 F(n==1) 
suma=1; 
else 
suma=sumar(n-1)+n; 


return suma; 


console. log + Ssumar(189)) 


Ejemplo 02-005: Realizar una función en JavaScript que permita pasar un numero 


entero de hasta 15 cifras a su correspondiente número en letras. 
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DESARROLLO 


Para desarrollar este programa utilizaremos funciones recursivas 


Esta funcion recibe como parametro un numero entero 
y lo convierte en su equivalente en letras 
por ejm. numeroLetra(14) -> CATORCE 
* (author Elmer Chuquiyauri 
* (version v1.0 
“* (Oparam (Number) n -El numero que se quiere pasar a letra. 
* ()return(String) numero letra - El numero e letra 


function numeroLetra(n) 

t 
numeroString=n.toString();//EL NUMERO A STRING 
decena="" 
numCifras=numeroString. length; 


ma 


numero letra=""; 


//numeros unicos 
const numerosUnicos=(+ 


numerosUnicos[0]=(numero: 


numerosUnicos[1|=(numero: 


numerosUnicos[2]=(numero: 


'9",descripcion: 
'1",descripcion: 
'2",descripcion: 


"CERO" + 
"UNO" > 


) 


numerosUnicos[3]=(numero:"3",descripcion:"TRES") 
"CUA + 
“CIN ) 
US ES) 
SIEMENS: 
"oCcHO" 3 
numerosUnicos[9]=(numero:"9",descripcion:"NUEVE") 
"11", descripcion:"ONCE"J 


numerosUnicos[4]=(numero:"4",descripcion: 


numerosUnicos[5]=(numero:"5",descripcion: 


numerosUnicos[6]=(numero:"6",descripcion: 


numerosUnicos[7]=(numero:"7",descripcion: 


numerosUnicos[8]=(numero: descripcion: 


numerosUnicos[10]=(numero:"10",descripcion:"L 


numerosUnicos[11]=(numero: 


su 


numerosUnicos[12]=(numero:"12",descripcion:" 


numerosUnicos[13]=(numero:"13",descripcion:"T 
numerosUnicos[14]=(numero:"14",descripcion:"C/ 


numerosUnicos[15]=(numero:"15",descripcion:"Q 
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[20]=(numero:"20",descripcion:"VEINTE") 
[30]=(numero: "30", descripcion:"TREINTA”") 
[49]=(numero: descripcion:"CUARENTA" ) 
[59]=(nun jescripcion:"CINCUENTA" 
[69]=(nur descripcion:"SESENTA") 
[70]=(numero: "70", descripcion: "SETENTA" ) 
[89]=(numero: "80" ,descripcion:"OCHENTA") 
[99]=fnui descripcion: "NOVENTA" 
cjon:PCIENT+ 

jon: "QUINIENTOS”"+ 
"700" ,descripcion:"SETECIENTOS”") 


[1000]=(numero: "1000", descripcion: "MIL" 
[1000000]=(numero:"12",descripcion: "UN MILLON") 


“Jetra=numeroLetra (numeroString[0]*10)+" y 
“+numeroLetra(numeroString[1]); 


break; 
case 3: 


switch(numeroString[0]) 


( 


case "1º: 


decenaLi=numeroString[1]+""+numeroStr 
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let decenaNl-=parseInt(decenall); 


numero letra= 
+numeroLetra(decenaN1); 


break; 


let 
cent=numerosUnicos [numeroString[0]*100].descripcion; 


let 
decenal5=numeroString[1]+""+numeroString[2]; 
let decentaN5S-parseInt (decenal5); 


numero letra=cent+ 
+numeroLetra(decenaN5); 


break; 
default: 
let 
decenalLX=numeroString[1]+""“+numeroString[2]; 
let decenaNX-parseInt(decenalX); 


numero letra=numeroLetra(numeroString[0])+ 


+numeroLetra(decenaNX); 


break; 


99 
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break; 
case 4: 


case 5: 
case 6: 


numeroString4="000"+numeroString; 


numeroString5=numeroString4.substring(numeroStringa4. 
6,numeroStringa4. 5 


numeroMenor=numeroString5.substring(numeroStrings. 
3, numeroStrings. E 


numeroMayor=numeroString5.substring(numeroStrings. 
6,numeroStrings5. ae DE 


if(parseInt (numeroMayor)==1) 
numero Jletra=" MIL 
“+numeroLetra(parseTInt (numeroMenor)); 
else 


numero Jetra=numeroLetra(parseInt(n 
umeroMayor))+” MIL “+numeroLetra(parseTInt (numeroMenor)); 


break; 
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7://NUMERO CON SIETE CIFRAS(1000000-9999999) 
8://NUMERO CON OCHO CIFRAS(10000000-99999999) 
9://NUMERO CON NUEVE CIFRAS (100000000-999999999) 


//se da formato para completar a 9 


let 
numeroMenori0=numeroString11.substring(numeroStringii.length 
-9,numeroStringlli.length); 

let 
numeroMayor10=numeroString1i1.substring(0,3); 


numero letra=numeroLetra(parseTInt (numeroMayo 
“+numeroLetra(parseInt (numeroMenor10)); 
ey Ap fa Ro Ne Da da Dos 
13: NUMERO CON TRECE 


14: 


2t numeroString1i3="000"+numeroString; 


numeroStringi4=numeroString1i3.substring(numeroStringli3.lengt 
h-15,numeroString13. length); 


Jet 
numeroMenor13=numeroString14.substring(numeroStringi4.length 
-12, numeroStringli4. length); 


let numeroMayor13=numeroStringi4.substring(0,3); 
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//se da formato al 
numero en letras 
//y se hacen llamadas recursivas a al 
funcion numeroLetra() 
numero letra=numeroLetra(parseInt (numero 
Mayor13))+” BILLON “+numeroLetra(parseInt (numeroMenor13)); 


break;//13,14,15 


numero letra="NO IMPLEMENT 
break;//default 


rn numero letra;//se retorna el numero en letra 


const n=prompt (“in 


console. log(numeroLetra(n)); 


CAPÍTULO Il: Fundamentos de JavaScript | 103 


2.7. Closesy POO. 


2.7.1. Programación Orientado a Objetos 


Es un paradigma de programación, donde la característica principal es utilizar objetos 
para representar cosas del mundo real, un conjunto de objetos compartirá características 
y atributos comunes para ello definimos una estructura genérica o formato que lo 


lamaremos “clase”. 


2.7.2. Clases 


Un conjunto de objetos que tienen las mismas características y que se comunican con los 
mismos mensajes podemos definirlos creando un formato genérico para su 
representación, a esta representación se le Ilama clase, Entonces podemos decir que una 
clase es la plantilla que representa a un conjunto de objetos con las mismas 
características. 
Si hacemos una analogía con teoría de conjuntos, a un conjunto se define por 
comprensión o extensión, por ejemplo: 

ASMLEN / 94=00=0 usas Comprensión 

AI, 45 Db sanpaninadaiiaã Extensión 


En el primer caso solo se indica la característica que tendrá x, es algo genérico, ósea es la 
clase lo que definimos, pero en el segundo caso el: 3, 4, 5, 6 son objetos que tienen 


existencia propia, son valores que tomo x. 


Las clases expresan una generalización, una abstracción, mayor que los objetos. 


En la FIGURA Nº 02-012 se puede observar a un esqueleto humano con sus partes, es 
una plantilla que toda persona tiene en su estructura interna; esto representaria una 
clase esqueleto humano; la actriz estadounidense: Katie Colmes, pertenece a esa 
estructura con sus propios valores de los atributos de la clase por lo que es la instancia 


de la misma(objeto). 


En la FIGURA Nº 02-013 se puede observar la plantilla o estructura de todo auto; cuando 


ya se fabrica en sí, llegan a tener existencia propia(objetos o instancia de la clase auto). 
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Por lo tanto, cuando a los atributos o propiedades de la estructura(clase) se les asigna 


valores, estamos instanciado(objeto) la clase. 


Escápula 


Húmero 
Costilla 
Cúbito Radio 
Fémur 
Peroné 


e Esqueleto Humano 


Sus instancias: 


José y su hijo Pepito Katie Colmes(La actriz estadunidense) 


FIGURA Nº 02-012: Se tiene el esqueleto humano, y tres instancias de personas con 


existencia propia 
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Clase: Auto 


FIGURA Nº 02-013: La estructura general de un auto(clase) y sus instancias(objetos) 
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2.7.3. Representación gráfica de una 


clase: notación UML 


Una clase en UML se representa con un rectángulo de 4 compartimientos, así como se 
muestra en la FIGURA Nº 02-014: 


Nombre Clase 


abatributo1 


Voperaciont() 
operacionZ() 


Voperaciona() 
2. 


0 


responsabilidad 


FIGURA Nº 02-014: Representación de una clase en UML 


Primer compartimiento: 


Nombre Clase N 


FIGURA Nº 02-015: Primer compartimiento de la representación UML 


En el primer compartimiento se pone el nombre de la clase y opcionalmente la 


multiplicidad N de la clase, en la parte superior derecho mostrado en la FIGURA Nº 02- 
015 


El nombre 


El nombre de la clase debe ser algo que represente la clase, su denominación debe estar 


en singular, la primera letra en mayúscula y los espacio en blanco con un sub guion (“ ”) 
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En el siguiente ejemplo de la FIGURA Nº 02-016 se muestra 6 clases: 


Boleta Boleta Detalle 


FIGURA Nº 02-016: Ejemplo de clases 


La multiplicidad(N) de la clase representa la cantidad de objetos que puede tener una 


clase 


Segundo compartimiento 


En el segundo compartimiento se lista los atributos que posee una clase 


Atributo: 


Un atributo es una propiedad o característica común a un conjunto de objetos, por 
ejemplo, el conjunto de objetos de la FIGURA Nº 02-017 los atributos o características 


común a todos ellos seria: nombre, colorPluma, colorPico, colorPata, formaPico, peso. 


AM 
» 
A 


FIGURA Nº 02-017: Instancias de la clase Ave 
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La representación de la clase Ave en UML con sus atributos será tal como se muestra en 


ombre 
olorPluma 
olorPico 
olorPata 
ormaPico 


la FIGURA Nº 02-018: 


FIGURA Nº 02-018: Clase Ave con su lista de atributos en el segundo compartimiento 


éCuáles sería los atributos del conjunto de objetos de la FIGURA Nº 02-013? 


Solución 


modelo 
anioFabricacion 
peso 
caballoFuerza 


color 


NS 


placa 
” etc. 


En UML sería así como en la figura 6.9. 


Auto 


modelo 
SbanioFabricacion 
Ebpeso 
EcaballoFuerza 


Ebscolor 
Ebplaca 


&»numeroAcientos 


FIGURA Nº 02-018: Clase Auto con su lista de atributos en el segundo compartimiento 


Especificación de atributos 


Un atributo se puede especificar utilizando la siguiente sintaxis: 
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[Visibilidad ] nombre [multiplicidad ] E [tipo] [= valor inicial ] | (cadena — de — propiedades) | 


[Visibilidad ] : Los atributos de una clase pueden ser accesibles por: 


Y Todas las clases 
” Las clases en las que son definidas 


Y Las clases en las que son definidas y por sus descendientes 


De acuerdo a esto un atributo posee una característica Ilamado visibilidad. 


Existe tres tipos de visibilidad: 


Public(+): Si un atributo tiene visibilidad pública, indica que se puede acceder desde 
dentro o fuera de la clase a la que pertenece y para indicar esto se pone el “+” delante 


del nombre del atributo. 


Private(-): Si un atributo tiene visibilidad privada, indica que se puede acceder solo 
desde dentro de la clase a la que pertenece, en otras palabras esto indica que solo los 
métodos de la clase tienen permiso para manipular al atributo. 


Para indicar que un atributo es privado se pone el “-” delante del nombre del atributo. 


Protected(*): Si un atributo tiene visibilidad protegida, indica que se puede acceder 
desde la clase a la que pertenece y además se puede acceder desde las clases 


descendientes y para indicar esto se pone el “&” delante del nombre del atributo 


Nota. - Cuando no se indica la visibilidad del atributo, se asume que es 


pública 


En el ejemplo que se muestra en la FIGURA Nº 02-019 se tiene la representación de la 


visibilidad de cada atributo. 


FIGURA Nº 02-019: Representación de la visibilidad de los atributos de la clase 
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De la clase (FIGURA Nº 02-019) se observa que: 
” Elatributos, atributos y atributos tiene visibilidad publica 
” Elatributog tiene visibilidad privada y 
” Elatributos tiene visibilidad protegida 


En la herramienta CASE Rational Rose, la representación de la visibilidad de cada 


atributo se muestra en la FIGURA Nº 02-020. 


NombreClase 
gatributol 


9 |Publico | 


& |Privado | 
fo | protegido | 


FIGURA Nº 02-020: Representación de los atributos de una clase en CASE Rational 
Rose 


[multiplicidad ] : Muestra la cantidad de veces que el atributo se repite; se coloca después 


del nombre del atributo y dentro de corchetes 


En la FIGURA Nº 02-020. El atributog es privada y tiene multiplicidad de: 0,1,2 693. 


FIGURA Nº 02-020: Representación de la multiplicidad de los atributos 


Tipo de dato 


[tipo] : Es el tipo de dato que tiene el atributo y puede ser cualquiera de los tipos de uso 


común tales como: int, string, char, float, double, date. 
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En la FIGURA Nº 02-021 se presenta la clase persona con sus atributos: nombre, DNI, 


telefono, direccion: de tipo string, fechaNacimiento: de tipo Date 


Persona 
«nombre : String 
EQDNI: String 
Ebtelefonp : String 
Ebdirecion : Single 
EbfechaNacimiento : Date 


FIGURA Nº 02-021: Estableciendo los tipos de datos de cada atributo 


Valor inicial 


[= valor -inicial ] : Es el valor inicial por defecto que se le puede asignar a un atributo; 


esto es útil para no tener inconsistencia de datos, en la FIGURA Nº 02-022 se muestra 
una clase Usuario, con sus tres compartimientos: Nombre Clase, Parámetros y 


operaciones. 


«Primary Key» -cuenta: char(15) 
-password: char(15) 
+nivel: char(40) 


+Usuario( ) 
-Agregarusuario() 
-EliminarUsuario() 
+listausuario( ) 
ficrearcuenta( ) 
ficambiarpassword( ) 


FIGURA Nº 02-022: Clase Usuarios con sus atributos y operaciones 


Cadena de propiedades 
| fcadena — de— propiedades) | : es un conjunto de propiedades que indican el grado de 


cambio que puede sufrir los atributos, que pueden ser: 
Y” Changeable: Se utiliza para indicar que no existen restricciones para modificar 
el atributo. 
Y. AddOnly: Se usa cuando los atributos tienen una multiplicidad mayor que 1 y 
significa que se puede afiadir más valores, pero una vez creado los valores, no 


puede ser removido ni alterado. 
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Y Frozen: esto indica que los valores de los atributos no pueden ser cambiados 


una vez que el objeto se inicializo. 


Tercer compartimiento 


Contiene las operaciones que los objetos de una clase pueden realizar. 


Operaciones 

Las operaciones describen el comportamiento de un objeto de una clase, es decir, como 
un objeto interactúa con su entorno a estos se le denomina también métodos. 

En la FIGURA Nº 02-023 se puede observar la clase usuario con tres operaciones en el 
tercer compartimiento: Usuario (), que es el constructor de la clase, AgregarUsuario(), 


EliminarUsuario(), entre otros. 


«Primary Key» -cuenta: char(15) 
-password: char(15) 
+nivel: char(40) 

ari2U 


-EliminarUsuario( ) 

+listausuario( ) 

Rcorearcuenta( ) 
btarpassword 


FIGURA Nº 02-023: El circulo encierra los métodos de la clase Usuario 


Cesar Liza Ávila nos menciona lo siguiente: 
“Según UML. Una operación representa el servicio que puede ser requerido por una 
instancia de la clase y que afecta su comportamiento. Un método es la implementación 


de una operación, esto es la forma específica de cómo lleva a cabo la operación” 


La sintaxis de las operaciones es similar al de los atributos: 


[Visibilidad [nombre (lista — parametros)]: [tipo — retorno] | fcadena — de- propiedades) | 
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Visibilidad de las operaciones 
[Visibilidad ] : Visibilidad de las operaciones 


Las operaciones de una clase tienen tres tipos de visibilidad que son: 


Publica (+): La operación puede ser invocado por cualquier objeto de otras clases; para 


cc ” 


indicar esto se le antepone al nombre el símbolo “+”. 


Privada (-): La operación puede ser invocada solo por la clase en la que fue creada; para 
indicar esto se le antepone al nombre el símbolo “-”. 

Protegida (4): Indica que la operación no puede ser invocada desde otra clase, pero si 
desde la clase en la que fue creada y de las clases descendientes; para indicar esto se le 
antepone al nombre el símbolo “&”. 

En la FIGURA Nº 02-023 se muestra un diagrama con tres clases, las operaciones 
Usuario(), AgregarUsuario(), EliminarUsuario() de la clase Usuario son de visibilidad 
privada; la operación listarUsuario() es de visibilidad pública; las operaciones 
crearcuenta(), cambiarpassword() tiene visibilidad protegida, esto significa que se puede 


acceder desde las clases Alumno y Administrativo. 


«Primary Key» -cuenta: char(15) 
-password: char(15) 


+nivel: char(40) 
0 


-Usuario() 
-Agregarusuario() 
-EliminarUsuario() 
+listausuario( ) 
fcrearcuenta( ) 
ftcambiarpassword( ) 


+Alumno 


+Administrativo 


FIGURA Nº 02-023: Diagrama de tres clases 
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Lista de parámetros 


[(lista — parametros) | : Lista de parámetros 


En la lista de parámetros se menciona las variables de entrada de la operación. 


Tipo de retorno 
[tipo — retorno | : Tipo de retorno 


El tipo de retorno es el valor que la operación retorna 


Constructores y destructores: dos operaciones especiales 


Un constructor es una operación de una clase encargada de crear un objeto de esa clase. 
Opcionalmente, también inicializa el estado del objeto. En algunos lenguajes de 
programación, el constructor de una clase debe tener el mismo nombre de la clase a la 


que pertenece. Por ejemplo, en un programa para pintar círculos: 


” el constructor de la clase Ventana es Ventana() 
Y” el constructor de la clase Circulo es Circulo() 
” yel constructor de la clase FormularioCírculo es FormularioCírculo() 
Para instanciar una clase se utiliza la palabra reservada new seguido del constructor(): 
circulot = new Circulo (); 
circulo2 = new Circulo (); 


Un destructor es un método que libera la memoria destruyendo el objeto. En algunos 


lenguajes de programación no es necesario definirlo ni invocarlos de manera explícita. 
Responsabilidad de la clase 

Cesar Liza Avila menciona lo siguiente: 

“Todas las clases deben cumplir una labor y esto es la responsabilidad de la clase. 


Una responsabilidad es un contrato u obligación que la clase debe cumplir, pues viene 
a ser el fin para la cual fue creada. Los atributos y comportamientos son las 


características de la clase que le permite cumplir con esas responsabilidades”. 
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Las responsabilidades de la clase se mencionan en un cuarto compartimiento, así 


como se muestra en la FIGURA Nº 02-024. 


Nombre Clase 


abatributo1 


Voperaciont () 

operacionZ() 
Voperacion3() 
0.0 


FIGURA Nº 02-024: La responsabilidad de la clase se describe en el cuarto 


compartimiento de la representación gráfica UML 
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2.8. Cases em JavaScript — 


2.8.1. Prototipos 


Cuando utilizamos objetos para representar cosas del mundo real para estructurar datos, 


por ejemplo, objetos alumno, definimos así: 


Se puede seguir definiendo más alumnos, pero se hace inmanejable, este inconveniente 
se solucionaría utilizando Arrays, otra forma de solucionar seria creando un prototipo 
que represente al conjunto de objetos de alumnos con sus atributos. 

Los prototipos son estructuras mediante el cual los objetos heredan atributos o 
características comunes entre sí. Su implementación en JavaScript se realizar con 
funciones constructoras. 

En el ejemplo anterior definimos un prototipo con la función constructora alumnod), 
que recibe como parâmetros atributos del objeto alumno, así mismo las propiedades 
saludar0) y getDatos() dentro de la función. Para hacer referencia a los atributos, 


propiedades se utiliza this. 
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function Alumno(codigo, nombre, apellido, correo)( 
this.codigo=codigo; 
this.nombre=nombre; 
this.apellido-=apellido; 


this.correo=correo 
this.saludar=function()( 


console. log("Hola )5 


this.getDatos=function()( 


this.codigo+ +this.nombre+” “+this.apellido; 


instancia el prot 


const al=new Alumno("0 


console. log(al); 
console. log(al.getDatos()); 


Para instanciar un prototipo utilizamos la palabra reservada new seguido del 
La función en este caso Alumno () con sus parametros, 
Las propiedades saludar() y getDatos() que están dentro del prototipo, se pueden 
definir fuera de ello y posteriormente asignarlo al prototipo Alumno. 
Alumno.prototype.saludar() 
Alumno.prototype.getDatos() 
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function Alumno(codigo,nombre,apellido, correo)( 
this.codigo=codigo; 
this.nombre=nombre; 
this.apellido=apellido; 


this.correo=correo 


Alumno.prototype. saludar=function()( 


console. log( ); 


Alumno.prototype. getDatos=function()( 


return this.codigo+” “+this.nombre+” “+this.apellido; 


const al=new Alumno( 


al.saludar(); 
console. log(al.getDatos()); 


2.8.2. Clases en JavaScript 


Las clases en JavaScript son una mejora en la sintaxis de representar objetos con 


prototipos, fue introducida en ECMAScript 2015. 


Clases Declaradas 
Para definir una clase declarada se utiliza la palabra reservada class seguida de un 


nombre de la siguiente manera: 
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class nombreClase( 
cons tucueicor (OI, 102 pes) À 
this.pli-pl; 
this.p2-p2; 
“vv octos atributos 


) 


Zi qlros métocos 


Clases Expresadas 
Es otra forma de definir una clase. Las expresiones de la clase pueden ser nombradas o 
anónimas: 


Clase anónima: 


const nombreConstante=class( 


constrnecror (pl pc) 
this.pl-pl1; 
this. p20p2; 
“Y erros atrabucos 


h 


“vv orros mécodes 


; 


Clase nombrada: 


const nombreConst=class nombreClase( 
concstruccortell p2 
this.pl-pl1; 
this.p20p2:; 
otro sn Enopicos 


) 


VV otros métodos 
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Herencia 

Para crear clases que heredan atributos y métodos de otra clase, utilizamos la palabra 
reservada “extends” seguido del nombre la clase padre, el método sumerQ en el 
constructor permite tener acceso a las propiedades heredadas, en el siguiente ejemplo se 
tiene una clase “Animal” con atributos: nombre, especie, numeroPatas, habitat. Otra 
clase “Ave” con sus atributos: colorPluma, colorPico, que además heredara los atributos 


de la clase Animal. 


//clase Animal 
class Animalf 
constructor (nombre, especie, numeroPatas,habitat) 
1 
this.nombre=nombre; 
this.especie=especie; 
this.numeroPatas=numeroPatas; 
this.habitat=habitat; 


; 
//gette 


get dato()( 
return “Nombre: "“+this.nombre+", es e: "+this.especie 


> 
//metodo 


getNombre() 
1 


urn this.nombre; 
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console. log )s 


const a=new Animal( 5 
console.log(a.dato); 
console. log(a.getNombre()); 


class Ave extends Animalf 
constructor (colorPluma, colorPico)f 


super(); 
this.colorPluma=colorPluma; 
this.colorPico=colorPico; 


, 


get colorPicoAve()( 
return this.colorPico; 


, 


get colorPlumaaAve()(f 
return this.colorPluma; 


, 
, 


console. log( 


const gallina=new Ave( 


gallina.nombre= 


gallina.especie= 


gallina.numeroPatas=2; 


gallina.habitat= 


console. log(gallina); 


121 
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2.9. Manejo de DOM y eventos — 


BOM (Browser Object Model) 
Es el modelo de objetos del navegador, que permite interactuar JavaScript con el 
navegador, para su acceso utilizamos la palabra reservada “window.” 


Algunas propiedades y método: 


window.innerHeight- la altura interior de la ventana del navegador (en 
píxeles) 

window.innerWidth- el ancho interior de la ventana del navegador (en píxeles) 

window.open()- abrir una nueva ventana 

window.close()- cerrar la ventana actual 

window.moveTo()- mover la ventana actual 


window.resizeTo()- cambiar el tamaãio de la ventana actual 


DOM (Document Object Model) 
Es la interfaz que permite interactuar documento HTML, CSS desde JavaScript en 
tiempo de diseão y ejecución. Se puede acceder a cualquier elemento a través de la 


palabra reservada “document.” 


Los elementos de un documento HTML están estructurados como un árbol donde cada 


uno de ellos es un nodo que representa una rama o hoja 


Nodo 
Es cada elemento del DOM, desde el document hasta un elemento. Es un objeto en sí. 
Para acceder a un nodo padre que contiene al nodo utilizamos el parentNode, para 


acceder a todos los nodos hijos se utiliza children 


Selectores 
— Selectores por identificador o id 
document.getElementByld(id) 
— Selectores por clases 
document.getElementsByClassName(nombreClase) 
— Selectores por tags 
Selector que permite seleccionar por etiqueta HTLM 


document.getElementsByTagName(nombreEtiqueta) 
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— Selectores por nombre 
document.getElementsByName(nombreElemento) 
— Selector general 
Selecciona una o varios elementos que coincida con elemento, puede ser: id, 
name, class, etiqueta, atributo, entre otros. 
”  document.querySelector(elemento) 
Selecciona un solo elemento que coincida con elemento 
” document.querySelectorAll(elemento) 


Selecciona todos los elementos que coincida con elemento 


Creando y removiendo elementos al document 


Para crear elementos utilizamos el: document.createElement(elementro), para 
crear un texto se utiliza document.createTextNode(texto), para remover un 


elemento utilizamos elemento Eliminar.remove(); 


Se puede clonar a cualquier elemento del document con .cloneNode(true) y hacer 


copias 


Siempre es bueno ver si el elemento o nodo existe en nuestro document para ello el 
elemento.isConnected permite verificar, retornando verdadero o falso dependiendo 


si es que se encuentra en el document 
Insertando elementos al document 


El método elemento.appendChild(nuevoElemento) permite insertar en el nodo padre 


elemento. 


El método elemento.insertAdjacentElement (posocicion ,elementoNuevo) inserta un 
elemento nodo dado en una posición dada con respecto al elemento sobre el que se 


invoca. 
Sintaxis: 

elemento. insertAdjacentElement (posocicion ,elementoNuevo) 
Parametro: posición 


Es una cadena que indica el lugar en donde se insertara el elementoNuevo al elemento 


padre: siendo uno de los siguientes valores: 
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'beforebegin' : Antes del elemento. 


afterbegin' |: Dentro del elemento, antes de su primer hijo. 
beforeend' |: Dentro del elemento, después de su último hijo. 


'afterend' : Después del elemento. 


Posición en donde se insertará el nuevoElemento: 
<!-- beforebegin --> 
<!-- afterbegin --> 
<otrosElementos> 
<!-- beforeend --> 


<!-- afterend --> 


El HTML del siguiente ejemplo en index.html, contiene un formulario con la etiqueta 


<form>: 


Desde JavaScript se crea y se inserta los elementos, antes de <form>, antes del 


<button>, después de </button>, después de </form>. 


Para ello desde JavaScript se accede a la etiqueta <formo>, luego se crean los elementos 
con la etiqueta <h1> con diferentes textos, luego se agrega según la posición requerida. 


Código JavaScript del archivo apps: 
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const form=document . quer 


const elemmetoNuevol=document. 
elemnetoNuevol .textContent= 


elemetoNuevo2=document . create 
elemnetoNuevo2.textContent= 


elemnetoNuevo3=document. createElement 
elemetoNuevo3.textContent= 


elemnetoNuevo4=document . create 
elemetoNuevo4.textContent= 


selemnetoNuevol); 
+ elemetoNuevo2); 
+elemetoNuevo3); 


+elemnetoNuevo4) ; 


Como resultado se puede observar en la FIGURA Nº 02-025 el código HTML modificado 


y su visualización en el navegador, tal como se muestra en la FIGURA Nº 02-026 


<!DOCTYPE html> == $0 
<html lang="en”> 
P <head> == </head> 
Y <body> 
<hli>Antes del form</h1l> 
Y<form action style=" 
<hl>Antes del ler hijo de form</h1> 
<button>HOLA</button> 
<h1l>Despues del ultimo hijo de form</h1> 
</form> 
<h1l>Despues de form</h1l> 
<script src="app.js"></script> 


== - d by live-server 


P<script>mo</script> 
</body> 
</html> 


FIGURA Nº 02-025: HTML modificado desde JavaScript con los nuevos elementos 


insertados 
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127.0.0.1:5500/index.htm 


Antes del form 


Despues de form 


FIGURA Nº 02-026: Resultado de insertar nuevos elementos al HTML 


elemento.innerHTML=cadenaHTML 


Permite remplazar todo el contenido de elemento con el HTML que asignamos en 
cadenaHTML 


Eventos 


Los eventos son acciones sobre los objetos del DOM, cada elemento puede tener asociado 
varios eventos que pueden ocurrir sobre ellos, se utiliza el metodo 


.«addEventListener(evento,función()) para asociar a un elemento 


elemento.addEventListener(evento,función()) 


Este método permite afiadir una escucha del evento indicado (primer parámetro), y en 
el caso que ocurra, se ejecutará la función asociada indicada (segundo parámetro). De 


forma opcional, se le puede pasar un tercer parámetro con ciertas opciones: 


elemento.addEventListener("DOMContentLoaded" functionOf 


//bloque de código que se ejecutara cuando sucede el evento 


3); 
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A continuación, se describe algunos eventos: 
DOMContentLoaded 
Este evento se desata cuando la página ha terminado de cargarse. 
click (onclick) 


Se produce cuando se da una pulsación o clic al botón del ratón sobre un 


elemento de la página, generalmente un botón o un enlace. 
DblIClick (ondblclick) 


Este evento es lanzado cuando el usuario hace doble click en un elemento de 


formulario o un link. 
change (onchange) 


Se desata este evento cuando cambia el estado de un elemento de formulario, en 
ocasiones no se produce hasta que el usuario retira el foco de la aplicación del 


elemento. 
focus (onfocus) 


El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la 
página o la ventana ganan el foco de la aplicación. 


keydown (onkeydown) 


Este evento se produce en el instante que un usuario presiona una tecla, 
independientemente que la suelte o no. Se produce en el momento de la 


pulsación. 
keypress (onkeypress) 


Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo 
determinado. Antes de este evento se produce un onkeydown en el momento que 


se pulsa la tecla. 


keyup (onkeyup) 
Se produce cuando el usuario deja de apretar una tecla. Se produce en el 
momento que se libera la tecla. 


mousedown (onmousedown) 


Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de 
la página. onmousedown se produce en el momento de pulsar el botón, se suelte o 


no. 
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mousemove (onmousemove) 
Se produce cuando el ratón se mueve por la página. 
mouseout (onmouseout) 


Se desata un evento onmuoseout cuando el puntero del ratón sale del área 


ocupada por un elemento de la página. 
mouseover (onmouseover) 


Este evento se desata cuando el puntero del ratón entra en el área ocupada por un 


el elemento de la página. 
mouseup (onmouseup) 


Este evento se produce en el momento que el usuario suelta el botón del ratón, 


que previamente había pulsado. 

submit (onsubmit) 

Ocurre cuando el visitante aprieta sobre el botón de enviar el formulario. 
scroll (onscroll) 


Este evento se produce cuando se realiza scroll o desplazamiento. Este 
desplazamiento se puede realizar en la página completa, pero también en 


elementos de la página que tengan sus propias zonas de scroll. 


Ejemplo 02-006: Realizar un formulario para calcular la suma de dos números 


con el siguiente disefio: 


SUMAR CACELAR 
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Ejemplo 02-007: Realizar un formulario para que calcule las 4 operaciones de: 


suma, resta, multiplicación y división con el siguiente diseão: 


EJECUTAR LIMPIAR 


Ejemplo 02-008: Realizar una calculadora con las cuatro operaciones de: Suma, 


Resta, Multiplicación y División con el siguiente disefio: 
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Ejemplo 02-009: Realizar un programa que permita realizar el juego de tres en 


raya entre una persona y la computadora con el siguiente disefio: 


REINICIAR 


210. JAPIfetdi > 


2.10.1. Interfaces de programación de 


Aplicaciones-API 


Son módulos o un conjunto de librería ya desarrolladas en algún lenguaje de 


programación para hacer algo específico y facilitar a los desarrolladores crear 


funcionalidades complejas de manera sencilla. 


Algunas APIs más comunes: 


Vá 


ND N 


APIs para manipular documentos. - API DOM (Document Object Model), que 
permite interactuar y manipular elementos del HTML y CSS de una página web. 
Las API para obtener datos de servidores de base de datos en formato JSON. 
Las API para dibujar y manipular gráficos 

Las API de dispositivos 

APIS de audio y vídeo 


Las APIs que permiten manipulador datos de servidores de base de datos. 
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Algunas APIs que proporcionan datos en formato JSON: 


(O) 


API que retorna lista de usuario de manera aleatoria 


https://randomuser.me/api/?results=10 

API de Mercado Libre que permite listar ítems pasándole a “q” la descripción: 
https: //api.mercadolibre.com/sites/MLA/search?q=computadora 

API REST de GitHub 


https://docs.github.com/es/rest?apiVersion=2022-11-28 


PokéAPI.- Información de los Pokémon como sus movimientos, habilidades, 


tipos, poderes, habitad, etc. 


https://pokeapi.co/ 


COVID Tracking.- Datos del COVID-19 de todo el mundo como número de 


contagios, pruebas, pacientes hospitalizados, fallecidos, etc. 


https://covidtracking.com/data 


OpenWeather APIs.- Información del clima, como los datos meteorológicos del 
día y de los afios anteriores, previsión climática, radiación solar, e incluso, 


colección de mapas. 


https://openweathermap.org/api 


JSON Pplaceholder.- API que proporciona datos fictícios como fotos, 


publicaciones, comentarios, datos de usuarios falsos, rutas entre otros. 


https: //jsonplaceholder.typicode.com/ 
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2.11. Manejo do APis on — 


JavaScript 


Para consumir datos desde APIs con JavaScript utilizaremos el API fech que permite de 


manera sencilla acceder a datos en formato JSON. 


Este API es una interfaz que permite a JavaScript acceder y manipular peticiones HTTP 
asincronas, es un estándar para realizar solicitudes de servidor con promesas y que 
permite obtener datos de la url especificado como parámetro. El método global que 


proporciona es el fetch(url). 


Sintaxis: 


Feteh (url. opEroens) 

-. then (function (response) ( 
Vi codiigo 

) 


«Catch (funetion(error) 1 


//codigo console.log (error .message) ; 


En 


El fetch() devuelve una promesa que es aceptada si recibe una respuesta “ok”. El manejo 
de las promesas se realiza con el método .then(function(response)), tal como se 
muestra en la sintaxis del fetchQ. La función como argumento es un callback que tiene 


como parámetro el objeto de respuesta “response”, de la petición realizado. 


El segundo método de fetch( es un objeto y es opcional, podría tener la siguiente 


estructura: 
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const options=T 
method: 
mode: 
cache: 


credentials: 


headers: ( 


redirect: 'fol! 
referrerPolicy: 


Del objeto options, el primer atributo es el método HTTP a utilizar en la petición, por 
defecto es “GET”, que podría ser también: POST, PUT, HEAD, entre otros. En el body 
se puede indicar un objeto para enviar, en le headers se puede indicar para modificar 
las cabeceras, en el atributo credentials se indica el modo en que se realizara la petición 
por defecto tiene el valor de “omit” y esto hace que no se incluya credenciales en la 


petición. 


En el siguiente ejemplo accederemos a los datos del API que proporciona Mercado Libre 


descrito anteriormente: 


https: //api.mercadolibre.com/sites/MLA /search?q=computadora 
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//url para consumir 
conse uprl=” 


fetch(url) 


.then(response =>response.json()) 


.then(data=>console.log(data)) 
«catch(function(error) ( 


console. log(error.message); 


El resultado impreso en consola de los datos retornados se puede apreciar en la FIGURA 


Nº 02-027. 


eies predete 


= fsite id: 'MLA", country default time zone: * 3:00", query: 'computadora", paging: f. results: 
Array(50), —.; B 
> available filters: (20) [(.), (-), (0), €2), (0), (0), €3, 003, 03, 3, 03, 03, 03, 03, £3, 
b available sorts: (2) [(=), 1-3] 
country default time zone: "GMT-03:00" 
b filters: [1-3] 
> paging: (total: 
query: "computadora” 
v results: Array(50) 
DO: (id: 'MLAI399231360', title: 'Silla De Escritorio Vonne Sv-gô Gamer Ergonómica Negra Y Blanca 

: ftid: 'MLAI408690360', + e: "Computadoras Notebook Laptop Baratas Ssd 256gb 6gb Windows", 

: (tid: 'MLA901119287', ti : "Pc Gamer Ryzen 3 Pro + 4 Gb Ddr4 +ssd 120 + Gabinete Kit", 

: ftid: 'MLAI357167365', t "Laptop Intel Core 13 2 En 1 Tablet Pc 13.3 = Mac Air', 

: (id: 'MLAI355799799", + "Cable Displayport A Hdmi 1.8 Metros Display Port 4k', condition: 
'MLA932293921', title: 'Pc Armada Gamer Amd Ryzen 5 5600g 12 Nucleo Ram 16gb Ssd 480', 
'MLAI327636549", t e: 'Disco Sólido Interno Kingston Sa400537/480g 480gb Negro", 
'MLA874813959', title: "Pc Armada Intel C I3 + 8 Gb Ssd 240 Wi Fi Nueva W1G Office", 
'MLA1106754666', title: 'Pc Cpu Computadora Intel I3 Hd ltb 8gb Oferta Gtia Cuotas ', 

: 'MLA1213934809', title: 'Cable Displayport A Hdmi 4k Adaptador Pc Ultra V2.0 3 Metros", 

: 'MLAS06660789', t "Pc Computadora Amd 3.5ghz Completa + Monitor 19 Nueva Cuotas', 
'MLAB81334859"', 'Teclado Silicona Macbook Pro 13 A1706 A1708 A2159', condition: 
'MLA1403734136', title: 'Cpu Dell Optiplex 780 Core 2 Duo - Ram 4 Gb - Disco 250 Gb', 
'MLAS06868836', title: 'Pc Computadora Completa Intel I3 C/monitor Led 19 Cuotas S/i 
'MLAS70679115', t 'Woox - Atril Base De Disefio Apoya Notebook Computadora", 

: 'MLA1212783041', t : "Cable Displayport A Hdmi 4k Adaptador Pc Ultra V2.0 1.8 Mts', 

b 16: (id: 'MLA874819289', t e: 'Pc Armada Intel Core I5 8gb Ssd240 W10 Office", condition: 'new', 


FIGURA Nº 02-027: Datos obtenidos con fetch desde el API de Mercado Libre 


Desarrollo de 
Soluciones 
frontend con 
JavaScript 
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JavaScript 


JavaScript es un lenguaje de programación interpretado y de alto nivel, ampliamente 
utilizado para crear páginas web dinámicas e interactivas. Es un lenguaje del lado del 
cliente, lo que significa que se ejecuta en el navegador web del usuario, aunque también 


se puede utilizar del lado del servidor con plataformas como Node.js. 


Características principales de JavaScript: 


1. Interactividad: Permite a los desarrolladores agregar comportamientos 
interactivos a las páginas web, como formularios interactivos, juegos, 


animaciones y actualizaciones en tiempo real. 


2. Lenguaje de Script: Es un lenguaje de script, lo que significa que no necesita 
ser compilado antes de ejecutarse. Los navegadores web interpretan el código 


JavaScript directamente. 


3. Orientado a Objetos: Aunque JavaScript no es un lenguaje de programación 
orientado a objetos en el sentido tradicional, permite la creación y manipulación 


de objetos, lo que facilita la reutilización del código y la organización del mismo. 


4. Lado del Cliente y Servidor: Originalmente disefado para ser ejecutado en 
el navegador del usuario (lado del cliente), JavaScript también se puede utilizar 
en el lado del servidor con tecnologias como Node.js, permitiendo construir 


aplicaciones web completas con un solo lenguaje de programación. 


5. Versatilidad: Se puede utilizar para una amplia variedad de tareas, desde la 
validación de formularios hasta la creación de aplicaciones web completas y 


móviles. 


6. Integración con HTML y CSS: JavaScript se integra estrechamente con 
HTML y CSS, los lenguajes de marcado y estilo utilizados para crear la 


estructura y apariencia de las páginas web, respectivamente. 
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3.1. 


Frontend con JavaScript 


Se refiere a la creación y mejora de la interfaz de usuario de una aplicación web 
utilizando JavaScript. Esto incluye la interacción del usuario con la página web, la 
manipulación del DOM (Document Object Model), la actualización de contenidos de 
manera dinámica, y la comunicación con servidores para obtener y enviar datos. 


Elementos Clave del Desarrollo Frontend con JavaScript: 


“” Manipulación del DOM: JavaScript permite acceder y manipular los 
elementos HTML y CSS de una página web, lo que es fundamental para crear 


una interfaz de usuario interactiva. 


Y Eventos del Usuario: Permite capturar y responder a eventos del usuario, 


como clics, desplazamientos, entrada de datos, entre otros. 


Y. AJAX (Asynchronous JavaScript and XML): Facilita la comunicación 
asincrónica con el servidor para actualizar partes de una página web sin 


necesidad de recargarla por completo. 


” Frameworks y Librerías: Existen numerosas herramientas como React, 


Angular y Vue.js que simplifican y estructuran el desarrollo frontend. 


Ejemplos de Desarrollo Frontend con JavaScript: 
1. Manipulación del DOM: 


En este ejemplo, al hacer clic en el botón, el texto del div con id "mensaje" se 
cambia dinámicamente. 


Hola, mundo! i Texto cambiado! 
| Cambiar Texto | | Cambiar Texto | 
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DOCTYPE html 

html lang= 

head 
meta charset= 
meta http-equiv= content= 
meta name= content= 
title>Manipulación del DOM</title 

head 

body 
div id= Hola, mundo!</div 
button id= Cambiar Texto</button 


script 
document. 
document. g Ne ven er » function 
document . getElementById ). innerText = - 
)s 
WD; 
script 
body 
html 


2. Eventos del Usuario: 


Este ejemplo muestra cómo se puede capturar la entrada del usuario en tiempo 


real y mostrarla en un párrafo. 


DOCTYPE html 

html lang= 

head 
meta charset= 
meta http-equiv= content= 
meta name= content= 
title>Eventos del Usuario</title 

head 

body 

input type= i placeholder= 


istener >» function(event) ( 
innerText event. target.value; 


script 
body 
html 


| Primer programa 


Primer programa 


3. AJAX para Comunicación Asincrónica: 


Aquí, al hacer clic en el botón, se envía una solicitud a un servidor y se muestra el 


contenido recibido en el div. 
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Cargar Datos 


| Cargar Datos | 

Título: sunt aut facere repellat provident occaecati excepturi optio reprehenderit 
Contenido: quia et suscipit 

suscipit recusandae consequuntur expedita et cum 

reprehenderit molestiae ut ut quas totam 

nostrum rerum est autem sunt rem eveniet architecto 


3.2. 


Frontend con JavaScript 


Construcción de una Página Web de Venta de Automóviles 


El Proyecto es desarrollar una página web para la venta de automóviles de diferentes 
marcas. La página debe ser atractiva, fácil de navegar y permitir a los usuarios 
visualizar información sobre diversas marcas y modelos de automóviles. Además, debe 
incluir funcionalidades interactivas que mejoren la experiencia del usuario. 


Requisitos No Funcionales 


a. Disefio Responsivo 


La página debe ser accesible y usable en dispositivos móviles, tabletas y 
computadoras de escritorio. 


b. Estilo y Apariencia 


Utilizar CSS para crear un disefio atractivo y coherente. 


c. Rendimiento 


Optimizar las imágenes y el código para asegurar tiempos de carga rápidos. 
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Tecnologias Utilizadas 


HTML: Para estructurar el contenido de la página web. 


CSS: Para el disefio y la apariencia visual de la página. 


JavaScript: Para afiadir interactividad y manipulación dinámica del contenido. 


Pasos para la Implementación 


a. Planificación 
Definir el alcance del proyecto y los requisitos específicos. 
b. Desarrollo 
Estructura HTML: Crear la estructura básica de las páginas con HTML. 
Estilo CSS: Aplicar estilos y disefos usando CSS. 
Interactividad JavaScript: Afiadir funcionalidad interactiva con 
JavaScript. 
c. Pruebas 
Probar la página web en diferentes navegadores y dispositivos para asegurar 
la compatibilidad. 
Realizar pruebas de usabilidad para asegurar que la página sea fácil de 
navegar. 
d. Lanzamiento 


Codificación en CSS 


Subir la página web a un servidor y asegurar que esté disponible 
públicamente 
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display: 
flex-direct - 
padding-left: Irem; 


flex-shrink: €; 
margin-right: Irem; 


e-ifran 
position: 
padding-top: 


If 


I 


position: 
top: Trem; 
loft: OQ; 


color: [Ll]rgb(e, 
font-size: 
font-family: 


tont-fami ly 


color: [ 
fomt-size! 
font-family: 


barder-radius:5 


padding: 15px 


colar: 


backgroun 
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Codificación JS 


marcas()X 


document. form .text2, value=document .forml. select1 options [document ,forml. select1.selectedIndex) . value; 


modelos Toyota() 
docunent. form2.text2, voluc-document .form2. select1 options [document , form2. select1,sclectedIndex] . 
modelosHonda( )f 
docunent .form3. text2, value=document .form3. select1 options [document form3. select1.selectedIndex] . value; 
modelosSuzuki ()( 


document. form4. text2.value=document .forn4. select1 options [document . form4. select, selectedIndex] .value; 


1 
/ 


mostrar () 1 
numi=document . fornl.select1 value; 
num?= document .form2.select1 .value; 


num3= document .form3.select1 value; 
numd= document . form4. select] value; 


if(numl== OTA” && num2=="AURIS") 
document .write(" 
document .nrite(" 
document .write(" 
document .write( 
document .write( 
document .write(" 
document .write(" 
document .write( 
document .write( 


docunen 
document .urite( 
document .write( 
document .urite(" 
document .urite(" 
document .urite( 
document .urite( 
document .urite( 


document. write( 


(numl== 
document .write( 
document .write(" 
document .urite("F 
document .write( 
document .urite( 
document .urite( 
document .urite( 
document .urite( 


document .urite( 


(ruml=="TO 
document .urite( 
document .urite( 
document .urite( 
document .urite(” 
document .urite( 
document .urite( 
document .write( 
document .urite( 
document .urite(" 


(nunl== 
document .nrite 
document .write( 
document .nrite( 
document .write( 
document .write( 
document .urite( 
document .urite( 
document .write( 
document .write( 


(nunl= 
document .write( 
document .nrite( 
document .write 
document .nrite( 
document .write( 
document .write( 
document .nrite( 
document .nrite( 
document .nrite( 


(nunl== 
document .write( 
document .nrite( 
document .write( 
document .write( 
jocument .write( 
document .write( 
document .urite( 
document .urite( 
document .write( 


(numd== 
document. write 


document write 


( 

( 
document .write("P 

( 


document. write 
document .write( 
document write 
document write 


( 
( 
document .write( 
( 


document write 


f(numi==" 
document .write( 
docunent.write( 
document.write( 
document.write( 
document. write( 
document. write( 
document .write( 
document .write( 
document. write( 


£ (numi: 
document .write( 
document. write( 
document.write( 
document.write( 
document. write( 
document.write( 
document.write( 
document .write( 
document .write( 


(numi== 
document .write( 
document .write( 
document .write( 
document.write( 
document.write( 
document.write( 
document .write( 
document .write( 
document.write( 


&& numZ== 


&& numi== 
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if(nunl== 

document .write( 
document .write( 
document .write( 
document .write( 
document .urite( 
document .write( 
document .write( 
document .nrite( 
document .write( 


2 (nunl-» 
docunent write 


document nrite 


( 
( 
document .urite( 
document .write( 
document .nrite( 
( 
( 
( 
( 


document .urite 
document .urite 
document .rite 
document write 


(nunl== 
document .write( 
document .nrite( 
document .wurite( 
document .nrite( 
document .write( 
document .write( 
document .write( 
document .urite( 


document .write( 


F(nunl== 
document .mrite( 
document .write( 
document .write( 
document.mrite( 


document .write( 
document .write( 
document .write( 
document .write( 
document .write( 


F(numl== 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 


document .write( 
document .write( 


Sá numd== 


document .write("P 


document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 


1f(numi== 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
document .write( 
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Desarrollo de Soluciones 
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write 
rite 


write( 


rite(” 


t.write( 


ent mrite( 


mi. 


nt.write 


emrite(" 


ocument write( 
umert write 


t.write E 
write("<hZ 
ment.write("PR 
ert.write("<br 
ent write("<nZ 
ument write("<h2 
prt write("<h 
write("<h 
ent write("<h 


urite(" 

urite(" 
Cnrite( 

write(" 


write 
write 


( 
( 
write( 
tnrite( 


twrite("<h2 
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VENTA DE AUTOS 


Vicashakedi 


SELECCIONE EL AUTOMÓVIL DE SU PREFERENCIA 
p 


MARCAS DE AUTOMÓVILES: 
“> TOYOTA 


HONDA 
SUZUKI 


ogio la Marca: 


ange="modelosToyota 


ETIOS 
FJ CRUISE 
FORTUNER 


El modelo que e 
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="modelosSuzuk 


SWIFT 

JIMNY 
VITARA 
ERTIGA 


El modelo que escogio es: 


=“mostrar 


ja" >Uoicación 


1, tmi">Costear Venículo 


iAKEDI SAC, 


VENTA DE AUTOMÓVILES 
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NUESTRAS MARCAS 


kground-image: url (https 


TOVOTA 
ta es una marca llena de histor 
marcado el desarrollo d 
usuarios en todo el mui 


HONDA 
lass="card-Lext">Honda es una marca Japonesa dedicada a la fabricación de motocicletas, automóviles, motores acuaticos, robots y hasta 
aeronaves. Fundada en 1959, es considerada como la compania de motores de combustión in nás grande del nundo. 


MODELOS DE LA MARCA TOYOTA 
Inicio 


e en Sudemérica y Europa al Toyota Corolla 


ort o Corolla Hatch 


“>TOVOTA AvGO 
Precio: 
"sPrecio Despues: S/57,000. Ba 
El Toyota Aygo es la actualización del modelo más pequefio de la marca japonesa, el Toyota Aygo contará con tres nivel 


de equiponiento en muestro país. 
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g-1 ext-tark")Precio Despues: S/106,000.00 
El Toyota Corolla ha sido el caballito de batalla de millones de familias por más de 50 ahos, reconendada por la empresa. 


1e">TOYOTA CAMRY 
zer"Precio; 5/183 
bg-info text "Precio Despues; 5/183,009 
ext">Lllega à Espafia el Toyota Camry Hybrid, el modelo híbrido que completa la gana Toyota Camry de 2018, este modelo es 
uno de los mas exitosos y vendidos de nuestra empresa. 


class="c 


title= class= 


TOVOTA C-HR 
Precio Antes: $/123,390.90 
i precio Despues: 5/123,009.00 
">Su disefo futurista, prestaciones únicas y tecnologia hibrida auto-recargable, harén de la c-hr, la nejor conpafera para ti y 
el medio ambiente. 


“ classz 


TOYOTA ETIOS 
Precio Antes: 9/55,95.00 
g-i Precio Despues: S/55, 000.00 
El nuevo etios trae consigo una renovada náscara frontal que sorprenderá a muchos gracias a su diseho con un estilo más deportivo. 


TOYOTA FJ CRUISER. 
Precio Antes: S/206, 700.08 
À Precio Despues: S/206,000.00 
Probada en los terrenos nas abruptos, la fj cruiser hace honor a su legado y no se deja intimidar por ningún desafio. 


class= 


TOVOTA FORTUNER 
Precio Antes: 5/150,111.00 
Precio Despues: S/150,900.00 
class="card-text">La nueva fortuner cuenta con un renovado disero exterior que nuestra un nivel mas alto de distinciôn y fuerza que no conoce imposibles 


| para legor môs allã. 


e ld="s clos 
MODELOS DE LA MARCA HONDA 


HONDA JAZZ 
Precio antes: 5/11 
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Precio despues: 5/117,000.00 


5 el modelo más compac la gama Honda, pero ni es pequerio ni carece del encanto de la marca japonesa en el aspecto dinémico, 


HONDA NSX 
Precio antes: 9/318,830.00 
Precio despues: 5/317,000.00 
EL Honda NSX siempre ha sido el modelo más radical y deportivo de la firma japonesa, Un canto de cisne que con los afios se ha convertido en leyenda, 


HONDA ODYSSEY 
Precio antes: $/227,509.00 
Precio despues: 5/227,000.80 
La Honda Odyssey 2021 es un vehículo de grandes dimensiones. Como beneficio, se adjudica un excelente espacio interior, y visualmente podré 


comprobarlo en los estacionamentos. 


style= 


HONDA CR.V' 
Precio antes: S/135,259.00 
Precio despues: 5/135,000.00 


“EL Honda CR-V es un autonóvil todoterreno del segmento C producido por el fabricante japonés de automóviles Honda, 


HONDA ACCORO 
Precio antes: S/139,359 
g-1 t Precio despues: $/139,000 
La marca Honda Accord 2821 presenta un modelo deportivo con una manejabilidad óptima para la ciudad 


HONDA PILOT 
ger">Precio antes: S/.163,959 
g "Precio despues: S/.160,000 
El Honda Pilot 2021 acaba de aterrizar en Perú junto a su última actualización, acomparado de nuevas distinciones que le permiten continuar 


peleendo en cl segmento más competitivo del mercedo automotriz, 


Tle">HONDA WR-V 
Precio antes: 5/69,055.19 
si e Precio despues: 5/60,054.19 
Dentro de la gama Honda WR-V 2021 en Brasil, la nueva versión de entrada LX conservó el sistema de iluminación del modelo previo con 
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class 
class= HONDA CIVIC 
class Precio antes: S/574,170.00 
class= Precio despues: S/574,000.08 
class= EL Honda Civic es un autonóvil del segmento C fabricado por la empresa japonesa Honda. Tras haber pasado por varias modificaciones 


de generación, el Civic ha crecido en tamaiio, colocândose entre el Honda Jazz y el Honda Accord. 


ld= 


MODELOS DE LA MARCA SUZUKT 


SUZUKI CELERIO 
Precio antes: 5/44,200.20 
Precio ahora: S/44,000,00 
Presentamos el nuevo Celerio, un auto pequeio pero cargado con grandes ideas y con mayor espacio 


SUZUKI SWIFT 
“Precio antes: S/51,781,11 
Precio ahora: S/51,381.00 
Presentamos el Swift, un auto con un precio atractivo y recomendable 


SUZUKI JIMNY: 
Precio antes: S/168,623,39 
Precio ahora: 5/168,622.39 


Presentanos el Jimy, construida para enfrentar el clina y le terreno más hostíl, el Jimy va donde otros vehículos tenen. 


SUZUKI VITARA 
Precio antes: 5/122,257.41 
Precio ahora: 5/121,957.00 


Presentamos el Vitara que es un vehicilo a todoterreno, este veniculo es recomendado por B-SUV. 


SUZUKI ERTIGA 
Precio antes: S/ 78,103.53 
Precio ahora: S/ 77,703.00 


Presentamos el nuevo Ertiga - un auto que te permitirá ir más allá, recomendada por muchos 
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APV. 


Precio antes: S/ 


ivan es la mejor alternativa para tu familia. 


SUZUKT BALENO 
Precio antes: S/35,740,89 
Precio ahora: 5/35,440.00 


antes: S/5 12 
cio afora: S/.54,400.00 
no ves a creer cuânto te va a gustar 


class tainer mt-5 
ENCUENTRANOS: 
PILLCOMARCA 


Inicio 


MESTON 
r la empresa líder en la comercial. ón de vehículos y pres! ón d os post ventas, brindando soluc ê medida de 
« Ser reconocida por 1a calidad humana y profesional de nuestra gente, tanto por clie: mo por proveedores. 


VISTON ente 
t">Brindarte el mejor serv yal Z ser la mejor opción del mercado en venta de vehículos y servi 
os sino por las fi ades que € r una compra o cotiz 


CONTACTANOS: 
r z e ANd96cQukC 
Teléfon: 
Teléfon: 
Teléfon: 
Teléfon: 
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Teléfono; 935622046 


SIGUENOS 
class= 


href= 
FACEBOOK 


href= 


INSTAGRAM 


href= target 
TWITTER 


Ejecución de la Página 


— GQ | & venta-de-autos-vicashakedi-unheval-2021.netlifyapp * 
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NUESTRAS MARCAS 


TOYOTA 


Toyota es una marca Ilena de historia y 
una de las empresas fabricantes de 
vehículos más grandes de Japón, que 
ha marcado el desarrollo del mercado 
automovilístico, Sin dudas, goza de la 
confianza, aceptación, liderazgo y 
fiabilidad de millones de usuarios en 


HONDA 


Honda es una marca japonesa 
dedicada a la fabricación de 
motocicletas, automóviles, motores 


acuaticos, robots y hasta aeronaves. 


Fundada en 1959, es considerada 
como la compafiía de motores de 
combustión interna más grande del 


SUZUKI 


Suzuki Motor Corporation es una 
empresa japonesa dedicada a la 
fabricación de automóviles, 
motocicletas, motores fuera borda, y 
variedad de productos equipados con 
motores de combustión.1 Fue fundada 
en 1909 en la localidad de 


154 


todo el mundo. 


mundo. 


MODELOS DE LA MARCA TOYOTA 


Início 


ación del 
marca 
ntará con 


sem 


TOYOTA 
COROLLA 


Predio: $/106,730,00 
El Toyota Corolla ha sido el caballito 
de batalla de milionas de familias por 
más de 50 afios. recomendada por 'a 
empresa 


TOYOTA CAMRY 


Prechx 5/.153,040.00 


Lilega a Espafia el Toyota Camry 
Hybnd, el modelo híbrido que 
completa la gama Toyota Camry de 
2018, este modelo es uno de los mas 
exitosos y vendidos de nuestra 
empresa, 


MODELOS DE LA MARCA HONDA 


HONDA ODYSSEY 


Precio antes: $/227,50900 


La Honda Odyssey 2021 es un 
vehiculo de grandes dimensiones. 
Como benefício, se adjudica un 
excelente espacio interior, y 
visualmente podrá comprobarlo en 
los estacionamientos. 


=) 


HONDA CRV 


Precio antes: 5/135,259,00 


El Honda CR-V es un automóvil 
todoterreno del segmento € 
producido por el fabricante japonés 
de automóviles Honda, 


Hamamatsu, Japón. 


TOYOTA C-HR 


Predio Antes: $/123,390.00 


Su disefio futurista, prestaciones 
Unicas y tecnologia hiorida auto- 
recargable, harán de la c-hr, la mejor 
compara para ti y el medio 
ambiente, 


HONDA ACCORD 


Predio antes: 5/139,359 


La marca Honda Accord 2021 
presenta un modelo deportivo con 
uns manejabilidad óptima para la 
ciudad 


TOYOTA ETIOS 


Predio Antes: 5/55,965,00 


El nuevo etios trae consigo una 
renovada máscara frontal que 
sorprenderá a muchos gracias a ! 
disefio con un estilo mês deporti 


HONDA PILOT 


Predio antes: 5/.163,959 


El Honda Pilot 2021 acaba de 
aternzar en Perú junto a su última 
actualización, acompafiado de nu 
distinciones que le permiten 
continuar peleando en el segmen: 
más competitivo del mercado 
automotriz. 
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MODELOS DE LA MARCA SUZUKI 


Inido 


SUZUKI JIMNY 


Presentamos el Jimny, construida 
para enfrentar el clima y le terreno 
más hostil, el Jimny va donde otros 
vehiculas temen 


ENCUENTRANOS: 
PILLCOMARCA 


Universidad Nacional Hermilio 


Universitaria Nº 6071-607, Pisco 


MISIÓN 


Ser la empresa líder en la 
comercialización de vehículos y 
prestación de servicios post ventas, 
brindando soluciones a la medida de 
nuestros clientes, Ser reconocida por 
a calidad humana y profesional de 
nuestra gente, tanto por clientes 


como por proveedores, 


SUZUKI VITARA 


Precio antes: S/122,257.41 


Presentamos el Vitara que es un 
vehícilo a todoterreno, este vehiculo 
es recomendado por B-SUV, 


Universidad 
Nacional 
Hermílio 
Valdizán 


E 
HOSPEDA JE 
maisena Qt 


09 


VISIÓN 


Brindarte el mejor servicio y a la vez 
ser la mejor opción del mercado en 
venta de vehículos y servicios 
posteriores. y no solo por nuestros 
bajos precios sino por las facilidades 
que ofrecemos al cliente sl momento 
de realizar una compra o cotización 
de un vehículo, 


SUZUKI ERTIGA 


Presentamos el nuevo Ertiga — un 
auto que te permitirá ir más allá, 
recomendada por muchos 


scultad de Ingen 
vi y Arquitectura 


CONTÁCTANOS 


Teléfono: 924497701 
Telêfono: 948 a 
lelefono: 

Teléfono: 

Teléfono: 935622 


SUZUKI APV 
Penatame sen árion 


APV Minivan es la mejor alternativa 
para tu família. 


% 


Ea Misa 


SÍGUENOS 


Oy 


FACEBOOK 
INSTAGRAM 


TWITTER 
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SELECCIONE EL AUTOMÓVIL DE SU PREFERENCIA 
MARCAS DE AUTOMÓVILES: 
Usted Escogio la Marca: HONDA 
MODELOS: 


* Seleccione el modelo de su automóxil, según la marca escogida anteriormente. 


MODELOS DE TOYOTA: [AURIS || =] 


Elmodelo queescogioes: 


MODELOS DE HONDA: [JAZZ 2] 


El modelo que escogio es: | 


MODELOS DE SUZUKI: [CELERIO 4] 


El modelo que escogio es: 


USTED ESCOGIO EL MODELO CR-V DE LA MARCA HONDA 
PRECIO AL CONTADO: 8/135,000.00 


CARACTERISTICAS 

MOTOR: HP 115 Torque: 160 Nm 
CONECTIVIDAD : WIFI 4G 
CONFORD: Easy Park 
SEGURIDAD: 6 Airbags 


SQL y Sistemas 
Gestores de Base de 
Datos: SQL Server, 
MySQL, MariaDB, 
SQLite, MongoDB 
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SQL (Structured Query 
Language) 


Lenguaje de consulta estructurado, estándar que permite interactuar con bases de datos 
relacional en: Definición (Lenguaje de definición de datos-LDD), consulta y 
Manipulación de datos (Lenguaje interactivo de manipulación de datos-LMD) y control 


de datos y transacciones. 


k1. DPL (longuojo do 


Definición de Datos) 


Es el encargado de la gestión de la estructura de los objetos de la base de datos con cuatro 


operaciones: CREATE, ALTER, DROP y TRUNCATE. 


CREATE 


Esta sentencia permite crear objetos de base de datos: base de datos, tablas, vistas, 
procedimientos almacenados, funciones, entre otros. 


Por ejemplo, para crear una base de datos, una tabla: 
- CREATE DATABASE sis academico; 
- CREATE TABLE table name( 
column datatype, 
column2 datatype, 


column3 datatype, 


); 
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Sintaxis en MySQL 


CREATE TABLE alumno ( 
codigo varchar(10), 
apellidos varchar(50), 
nombre varchar(50), 
direccion varchar(50), 
fecha nacimiento date 


) 


CREATE TABLE curso( 
codigo char(10), 
nombre varchar(50), 
credito int 


) 


ALTER 


Esta sentencia permite modifica la estructura de un objeto de base de datos. Se puede 
modificar, quitar campos de una tabla, vistas, entre otros. 


Por ejemplo, se agrega una columna a la tabla alumno: 


- ALTER TABLE alumno ADD correo varchar(so); 


DROP 


Esta sentencia permite eliminar un objeto de la base de datos, puede ser base de datos, 
tabla, vista, procedimiento almacenado, entre otros. 


Por ejemplo, para eliminar una tabla “curso” la sintaxis seria así: 


- DROP TABLE curso; 


TRUNCATE 


Esta sentencia permite borrar el contenido de una tabla, por ejemplo, para borrar todo 
el contenido de la tabla alumnos escribiríamos así: 


-  TRUNCATE TABLE alumno; 
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4.2. 


Manipulación de Datos) 


Permite alterar el contenido de los registros de una tabla, realizar consultas, las cuatro 
operaciones fundamentales de la gestión de toda base de datos: INSERT, UPDATE, 
DELETE, SELECT. 


INSERT 


Esta sentencia permite agregar una o más registros a una tabla relacional, la cantidad 
de columnas y valores tienen que ser iguales y del mismo tipo asignado en su 
definición. 


Sintaxis: 


INSERT INTO 
nombre tabla (columnl,column2,...) 
VALUES 


( elencar ol) 


Insertando múltiples registros o filas: 


INSERT INTO 

nombre tabla (columnl,column2,...) 
VALUES 

(Ueitenstt vo UehoZi o ed 

( ualeniZ ts Velho aaa 

( valeria, Maloca dr 


IInsertando todas las columnas: 
INSERT INTO nombre tabla VALUES ('valor1', 'valor2'!,..) 


Insertando desde una consulta: 
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Por ejemplo, insertando un registro a la tabla alumno: 


INSERT INTO nombre tabla SELECT 'valori!, 'valor2",.. FROM 
nombre tabla consulta 


UPDATE alumno 
SET direccion='JR. PUNO f4587',correo= 'analigmail.com" 


WHERE codigo='20253012890" 


INSERT INTO 


alumno (codigo,apellido,nombre, dirección, 
fecha nacimiento, correo) 


VALUES 
(DOI 


Jo 


'CHUQUI YAURT SALDIVAR'", 'ELMER'", 


Insertando varios registros a la tabla alumno: 


INSERT INTO 


alumno (codigo,apellidos,nombre, direccion, 
Rec halneciimileniforfeormeo) 


VALUES 
(OZ St Zine 'GARCIA CHAVEZ ', 'MIRANDA', CIR 
LO qt2Dt, QDO -NSDO, “miimameatiomastÃl eoemU 


28 Dia 


('2025012889", "MARTINEZ SANDOVAL'", 'JUAN', 'JR. DOS DE 


AMO ODE, ME=-GO=HGDU Vsinenatiomast dl eo 0) 


UPDATE 
Esta sentencia permite modificar valores de los campos que se requiera. 


Sintaxis: 


UPDATE nombre tabla 


SET campoa='valorl”,campo2='valor2”,.. 


WHERE proposicion 
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Por ejemplo, para modificar la dirección del alumno “COTRINA CONDOR” cuyo código 


es “2023012890”: 


DELETE 
Esta sentencia borra una o más registro de una tabla. 


Sintaxis: 


DELETE FROM nombre tabla WHERE proposicion 


Para borrar al alumno “COTRINA CONDOR? cuyo código es “2023012890”. 
DELETE FROM alumno WHERE codigo="'2023012890" 


SELECT 
Esta sentencia permite realizar consultas a los datos de las tablas de una base de datos. 


Sintaxis básica: 


SELECT [(ALL| DISTINCT)] 


colvmal, column? eo 


FROM (<nombre tablai>|<nombre vistal>)[, 


t<nombre tabla2>|<nombre vista2>)...] 


[WHERE <proposicioni> [(AND|OR/ <proposicion2>...]] 


[GROUP BY <columnl>[, <column2>...]] 


Con esta sentencia se seleccionan registros con columnas 
de uno o mas tablas dependiendo de la condición del 
WHERE. 


el ALL anteponiendo a una columna indica que se 
SELECT seleccionaran todos los registros. Anteponer el 
DISTINCT a una columna seleccionara solo los valores 
distintos. 


FROM Aquí se indica la tabla o tablas de donde se obtendrán los 
datos 


WHERE Aquí se establece la condición o proposición según el cual 
se escogerán los registros, para generar proposiciones 
compuestas se utiliza los conectores lógicos AND o OR 
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GROUP BY 


Con esto se agrupan registros de una tabla dependiendo de 
lo que se requiera con la columna establecida. 


HAVING 


Esto es similar al de WHERE, pero aplicado a los registros 
devueltos por la consulta. Se aplica junto a GROUP BY, la 
condición debe estar referida a las columnas contenidos en 
ella. 


ORDER BY 


Esto permite ordenar la consulta de forma 
ascendente(ASC) o descendente(DESC) por la columna 
que se indique. 


EJEMPLO Nº04-001. 


En la FIGURA Nº 04-001 se muestra parte de un modelo lógico de una base de 


datos de facturación con algunas tablas y sus relaciones entre ellos: 


Ho beneficencia centrocostos 
g centrocosto : int(11) 


E descripcion : varchar(30) 


Mo beneficencia persona 
E DNI: varchar(11) 
g apellido nombre : varchar(100) 
g direccion : varchar(80) 
g telefono : varchar(30) 
4 tipopersona : int(11) 
g ruc: varchar(11) 
= razonsocial : varchar(50) 
E) partidaelectronica : varchar(30) 
= oficinaregistral : varchar(80) 
= domicilioPN : varchar(80) 


a correo : varchar(50) 


Do beneficencia boleta 
& boleta : int(11) 

g DNI cliente : varchar(8) 
m fecha : date 

4 anulado : int(11) 

4 centrocosto : int(11) 

4 personal: int(11) 

a serie : varchar(4) 

4 numero : int(11) 

4 tipodocumento : int(11) 
a observacion : text 

E hora : time 

= guia : varchar(50) 


* igv cint(11) 


|v] O beneficencia boleta detalle 
4 boleta : int(11) 

& item :int(11) 

4 cantidad : decimal(10,2) 

q unidad : varchar(20) 

4 precio : decimal(10,2) 


3 observacion : text 


Mo beneficencia item 
* item cint(11) 

E descripcion : varchar(80) 
g unidad : varchar(10) 

& precio : decimal(10,2) 


4 centrocosto : int(11) 


FIGURA Nº 04-001: Diagrama que muestra algunas tablas de una base de datos de 


facturación 


a) Del diagrama mostrado en la FIGURA Nº 04-001, realizar una consulta para 


que me muestre los apellidos y nombres de los clientes con sus respectivas 


cantidades de boletas y ordenado por apellido. 


b) Del diagrama mostrado en la FIGURA Nº 04-001, realizar una consulta para 


que me muestre los apellidos y nombres de los clientes con sus respectivas 


cantidades de ítems por boleta. 
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DESARROLLO 


a) Para realizar la consulta requerida se consultará a la tabla bolete y a la tabla 
persona que están relacionado por la columna DNI, así mismo se agrupara 
por la columna DNI para contar la cantidad de boletas por persona. 


Consulta: 


SELECT p.apellido nombre, COUNT (b.boleta) AS cantidad 
FROM boleta AS b, persona AS p 


WHERE b.DNI cliente=p.DNI 


Resultado consulta: 


«4? Mostrando filas 0 - 24 (total de 101, La consulta tardó 0,0816 segundos.) 


SELECT p.apellido nombre, COUNT(b.boleta) as cantidad FROM 


boleta AS b, persona AS p WHERE b.DNI cliente=p.DNI GROUP BY 
b.DNI cliente ORDER BY cantidad DESC; 


| ] Perfilando [ Editar en línea ] [ Editar ] [ Explicar SOL ] [ Crear código PHP] 
[Actualizar ] 


1» a E ( ] Mostrar todo Número de filas: 25 vw 


Opciones extra 


apellido nombre cantidad » 41 
DATOS DE PRUEBA 

EULOGIO CESPEDES, FLAVIO 

QUISPE ARCE, KATERINE LIZ 

OSORIO PILLCO, JOSEFINA 

GONZALES ACUNA, YRENE BEATRIZ 

MALLQUI NIETO, MARCOS BRUCE 

OBREGON TARAZONA, PATRICIA ALEJANDRA 


MN NO wwlw mM 


BAZAN BECERRA. JAIME 


FIGURA Nº 04-002: Resultado de la consulta realizada 


b) Para realizar la consulta requerida se consultará a la tabla bolete, 
boleta detalle y la tabla persona, la tabla boleta está relacionado con la 
tabla persona por la columna DNI, la tabla boleta está relacionado con la 


tabla boeta detalle por la columna boleta, así mismo se agrupa por la 
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columna boleta de la tabla boleta detalle de la tabla boleta detalle 
para contar la cantidad de ítems por boleta y se rodena por apellido 


Consulta: 


SELECT p.apellido nombre,b.boleta, COUNT(bd.item) As cantidad 
FROM boleta As b, boleta detalle As bd, persona As p 
WHERE b.boleta=bd.boleta AND b.DNI cliente=p.DNI 


GROUP BY bd.boleta ORDER BY p.apellido nombre 
Resultado consulta: 


b.DNI cliente-p.DNI GROUP BY bd.item ORDER BY p.apellido nombre; 


[ ] Perfilando [ Editar en línea ] [ Editar ] [ Explicar SOL ][ Crear código PHP] [ Actualizar 


[ ] Mostrar todo Número de filas: 25 wv Filtrar filas: | Buscar en esta tabla 
Opciones extra 

apellido nombre « 1 boleta  cantidad 

ALETOIS PEREZ 22 10 
ANDRES FABIAN 1 7 
CALERO Y ACOSTA, FORTUNATO 34 5 
CORDOVA ROQUE Maria Jasus 53 1 
DATOS DE PRUEBA 122 5 
DAYRON YARA 21 13 
DURAND LEANDRO, YERSY 32 8 
FELICIANO PRINCIPE 2 15 
FIERRO REQUENA ELIZABETH e 8 
GOMEZ MEGIA 4 4 
GOMEZ MEGIA 4 47 
GOMEZ MEGIA 4 58 
LANDEO PINCHES. JAHZEEL ISABEL 19 1 
LANDEO PINCHES. JAHZEEL ISABEL 19 8 
MALLQUI NIETO, MARCOS BRUCE 28 7 
QUISPE ARCE. KATERINE LIZ 27 e 


FIGURA Nº 04-003: Resultado de la consulta realizada 
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4.3. 


de Datos) 


Estas sentencias permiten controlar el acceso a los objetos de una base de datos, 


otorgando o denegando permisos a uno o más usuarios para realizar determinadas 


tareas. 


Los comandos que se utilizan para ello son: GRANT y REVOKE 


GRANT 
Con este comando se otorga permisos 
REVOKE 


Con este comando se quita permisos que previamente se han concedido con el 
comando GRANT. 


4.4. 


Language) 


Lenguaje de control de transacción en una base de datos, esto es; agrupar 


operaciones en un solo concepto, para indicar a la base de datos que haga todas las 
operaciones o ninguno. Para esto se utiliza estos comandos: COMMIT, ROLLBACK 
y SAVEPOINT. 


COMMIT 


Con este comando se graba todos los cambios en la base de datos, completando así 


la transacción. Es importante indicar el inicio de cada transacción. 


ROLLBACK 
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Si hay algún inconveniente en la transacción se puede deshacer las operaciones o 


cambios realizados en la base de datos, para ello se utiliza este comando ROLLBACK. 


SAVEPOINT 


Este comando permite definir un punto de salvaguarda dentro de una transacción. 


4.5. Gestor de Base de Datos 


SQL Server 


SQL Server es un sistema de gestión de base de datos relacional cuya función 


principal es la de almacenar y recuperar datos según lo requiera otras 


aplicaciones. Fue desarrollado por Microsoft por lo que su uso depende de una 


licencia, pero también se cuenta con versión gratuita SQLServer Express y 


SQLServer Developer, este último tiene todas las características que se puede 


usar como servidor de base de datos de desarrollo y pruebas en los entornos de 


no productivos. 


Algunas características: 


Vá 


Y 


Soporte de transacciones. 
Escalabilidad, estabilidad y seguridad. 
Soporte de procedimientos almacenados. 


Incluye también un potente entorno gráfico de administración, que permite 


el uso de comandos DDL y DML gráficamente. 


Permite trabajar en modo cliente-servidor, donde la información y datos se 
alojan en el servidor y las terminales o clientes de la red solo acceden a la 


información. 
Permite administrar información de otros servidores de datos. 


Versiones de SQL Server. 


Últimas versiones del SQLServer: 


CAPÍTULO IV: SQL y Sistemas Gestores de Base de 
Datos:SQL Server, MySQL, MariaDB, SQLite, MongoDB | 168 


á Microsoft SQL Server 2022 

/ Microsoft SQL Server 2019 (64 bits) 

vá Microsoft SQL Server 2019 en Linux (64 bits) 
vá Microsoft SQL Server 2017 (64 bits) 

/ Microsoft SQL Server 2017 en Linux (64 bits) 
Ud Microsoft SQL Server 2016 (64 bits) 


vá Microsoft SQL Server 2014 SP3 (64 bits) 


Instalación y configuración de SQL Server 2022 Express 
Para su instalación se descarga desde la página oficial de Microsoft: 


https://www.microsoft.com/es-mx/sql-server/sgl-server-downloads 


Seleccionar la versión requerida: 


O descarga una edición especializada gratis. 


Desarrollador Express 
SQL Server 2022 Developer es una edición gratuita con todas las SQL Server 2022 Express es una edición gratuita de SQL Server, que 
características, que se puede usar como base de datos de desarrollo y es ideal para el desarrollo y la producción, para aplicaciones de 
pruebas en los entornos no productivos. escritorio, | servidores. 


Descargar ahora Descargar ahora 


FIGURA Nº 04-004: Descarga del instalador del SQLServer2022 Express 


Una vez que se descargue se ejecuta el archivo de instalación. 
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SQL Server 2022 
Express Edition 


Seleccione un tipo de instalación: 


Básica Personalizado Descargar medios 


le uso y rendimien 


FIGURA Nº 04-005: Instalación de SQLServer2022 Express 


Se elige la Personalizado. La instalación predeterminada está en inglés. Para la 
instalación en espafiol, el Windows del sistema operativo se tiene que 


configurar a espafiol. 


SQL Server 2022 
Express Edition 


Seleccione un tipo de instalación: 


Básica g Descargar medios 


FIGURA Nº 04-006: Instalación Personalizado de SQLServer2022 Express 
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Click en si para continuar: 


Instalador de SQL Server 


El idioma de la interfaz de usuario, “espafiol (Espania, alfabetización internacional) 
(es-ES)”, y los formatos numéricos, “espahiol (Perú) (es-PE)”, no coinciden. ;Quiere 
continuar en inglês? De lo contrario, câmbielos para que coincidan con “espafiol 
(Espafia, alfabetización internacional) (es-ES)". 


Consulte este recurso para obtener más información 


FIGURA Nº 04-007: Click en Si para continuar 


Click en instalar: 


SQL Server 2022 
Express Edition 


Especificar la ubicación de destino de la descarga de medios de SQL 
Server 


SELECCIONAR IDIOMA [Inglés ” ESPACIO LIBRE MINIMO 


6613 MB 
UBICACIÓN DE LOS MEDIOS* 


CASQL2022 


TAMANO DE LA DESCARGA 
282 MB 


FIGURA Nº 04-008: Click en instalar para continuar 
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El proceso de descarga de paquetes de instalación: 


SQL Server 2022 
Express Edition 


Descargando el paquete de instalación... 


Adquiriendo archivos de instalación... 23,067 MB / 544186 MB 7,112 Mbps 


emote machine, then you need to complete the 


FIGURA Nº 04-009: En proceso de descarga paquetes de instalación 


Una vez terminado la descarga de paquetes, saldrá la ventana mostrada en la 
FIGURA Nº 04-010, para poder instalar SQLServer2022, del cual seleccionamos 


New SQL Server, para instalar una nueva instancia. 


4 SQL Server Installation Center = [mi x 
Planning Ss New SOL Server standalone installation or add features to an existing installation 
Installation Launch a wizard to install SQL Server 2022 in a non-clustered environment orto add 

features to an existing SQL Server 2022 instance. 
Maintenance 
Tools =>) Install SOL Server Reporting Services 
oo == 
ss] Launch a download page that provides a link to install SQL Server Reporting Services. An 
Resources internet connection is required to install SSRS. 
Options (9: Install SOL Server Management Tools 


DÃO Launch a download page that provides a link to install SQL Server Management Studio, 
SQL Server command-line utilities (SOLCMD and BCP), SQL Server PowerShell provider, 
SQL Server Profiler and Database Tuning Advisor. An internet connection is required to 
install these tools. 


14 Install SOL Server Data Tools 


Launch a download page that provides a link to install SQL Server Data Tools (SSDT). SSDT 
provides Visual Studio integration including project system support for Microsoft Azure 
SQL Database, the SQL Server Database Engine, Reporting Services, Analysis Services and 
Integration Services. An internet connection is required to install SSDT. 


õ Upgrade from a previous version of SQL Server 


Launch a wizard to upgrade a previous version of SQL Server to SQL Server 2022. 
Click here to first view Upgrade Documentation 


Microsoft SQL Server 2022 


FIGURA Nº 04-010: instalación de una nueva instancia 
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Check en aceptar los términos de la licencia y Next: 


5 sQOL Server 2022 Setup 


License Terms 


To install SQL Server 2022, you must accept the Microsoft Software License Terms. 


License Terms 

Global Rules 

Microsoft Update 

Product Updates 

Install Setup Files 

Install Rules 

Azure Extension for SQL Server 
Feature Selection 

Feature Rules 

Feature Configuration Rules 
Installation Progress 


Complete 


CE Dem thelicensetermsand Privacy Statement 


SQL Server 2022 Express Edition 


YOU MUST ACCEPT THE SOFTWARE LICENSE TERMS. SEE BELOW. Please E 
read the full license terms provided at (aka.ms/useterms). 


DATA COLLECTION. The software may collect information about you and your 
use of the software and send that to Microsoft. Microsoft may use this 
information to provide services and improve Microsoft's products and services. 
Your opt-out rights, if any, are described in the product documentation. Some 
features in the software may enable collection of data from users of your 
applications that access or use the software. If you use these features to enable 
data collection in your applications, you must comply with applicable law, 
including getting any required user consent, and maintain a prominent privacy 
policy that accurately informs users about how you use, collect, and share their 
data. You can learn more about Microsoft's data collection and use in the 
product documentation and the Microsoft Privacy Statement at 


httne iam micrnacaft com fisdimb DP inlA-G91920 Vo anraa to camelo arith all a 


SQL Server transmits information about your installation experience as well as other usage and 
performance data. Azure Arc connection also transmits the configuration data to allow you to manage 
and protect your SQL Server instance using Azure Portal and services. To learn more about data 
processing and privacy controls, and to tum off the collection of certain information, see the 


documentation. 
< Back Cancel 


FIGURA Nº 04-o011: Check en aceptar licencia y Next 


Deseleccionar Azure Extension for SQL Server: 


1? sQL server 2022 Setup 


Azure Extension for SQL Server 


Azure Extension for SQL Server is required to enable Microsoft Defender for Cloud, Purview, and Azure Active Directory. 


License Terms 
Global Rules 
Microsoft Update 
Product Updates 
Install Setup Files 
Install Rules 


Azure Extension for SQL Serv... 


Feature Selection 
Feature Rules 
Instance Configuration 


Server Configuration 


Database Engine Configuration 


Feature Configuration Rules 
Installation Progress 


Complete 


Jo install Azure extension for SQL Server, provide your Azure 
account or a service principal to authenticate the SQL Server 
stance to Azure, You also need to provide the Subscription ID, 
Resource Group, Region, and Tenant ID where this instance will be 
registered. For more information for each parameter, visit 
https://aka.ms/arc-sql-server. 


Azure Extension for SQL Server 


Use Azure Login 


Use Service Principal 


Azure Service Principal ID* 


Azure Service Principal Secret” 


Azure Subscription ID* 


Azure Resource Group” 


Azure Region* 


Azure Tenant ID* 


Proxy Server URL (optional) 


<Bak A Cancel 


FIGURA Nº 04-012: Deseleccionar Azure Extension for SQL Server y Next 
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Click en Next para proseguir con la instalación: 


f5 SQL Server 2022 Setup 


Feature Selection 


Select the Express features to install. 


License Terms 
Global Rules 

Microsoft Update 

Product Updates 

Install Setup Files 

Install Rules 

Azure Extension for SQL Server 
Feature Selection 

Feature Rules 

Instance Configuration 

Server Configuration 

Database Engine Configuration 
Feature Configuration Rules 
Installation Progress 


Complete 


O Looking for Reporting Services? 


Features: 


Database Engine Services 
E soL Server Replication 


Shared Features 
Fã LocalDB 
Redistributable Features 


Select All Unselect All 
Instance root directory: 
Shared feature directory 


Shared feature directory (x86): 


4 Machine Learning Services and Language Exi 
EZ Full-Text and Semantic Extractions for Searck 
PolyBase Query Service for External Data 


Download it from the web 


Feature description: 


The configuration and operation of each 
instance feature of a SQL Server instance is 
isolated from other SQL Server instances. SOL 
Server instances can operate side-by-side on 
the same computer. 


Prerequisites for selected features: 


Already installed: A 
Windows PowerShell 3.0 or higher 
To be installed from media: 
Microsoft Visual C++ 2017 Redistributable 
Microsoft MPIvIO bed 
Disk Space Requirements 


Drive C: 2022 MB required, 138889 MB 
available 


CNProgram FilesiMicrosoft SOL Server. 


CProgram FilesiMicrosoft SOL Server 


CNProgram Files (x86)Microsoft SQL Server 


RE 45) 


FIGURA Nº 04-013: Next para proseguir la instalación 


Si se desea crear una instancia nueva seleccionar Named instance e ingresar el 


nombre, tal como se muestra en la FIGURA Nº 04-o14: 


(E SOL Server 2022 Setup 


Instance Configuration 


Specify the name and instance ID for the instance of SQL Server, instance ID becomes part of the installation path, 


License Terms 

Global Rules 

Microsoft Update 

Product Updates 

Install Setup Files 

Install Rules 

Azure Extension for SOL Server 
Feature Selection 

Feature Rules 

Instance Configuration 

Server Configuratron 

Database Engine Configuration 
Festure Configuration Rules 
Installation Progress 
Complete 


(O Default instance 


(6) Named instance 


Instançe ID: 


SOL Server directory: 


Installed instances 


“A 


MSSQLSERVER | 


ChProgram FilesiMicrosoft SQL Server MSSQL 16.MSSQLSERVER 


[ Instance Name instance ID Features Edition Verson 

| EMAPA SAN, LUIS MSSQLIEMAPA, .. -SQLEngine SQUEn... | Express 11.0.2100.60 

| UNHEVAL | MSSQLHUNHEVAL | SQLEngine SQLEN... | Express [11.0.2100.60 | 
| ONPE MSSQL1.ONPE SQLEngine SQLEn... Express 11.0.2100,60 

| SERVER PRODUCCIO | MSSQLII SERVER .. SQLEngine SQLEn.. | Express 11,0.2100.60 | 
| <Shared Compone... SSMS, LocalDB 11.0.2100.60 


FIGURA Nº 04-014: Nombre de la nueva instancia 


En la FIGURA Nº 04-015 se muestra la forma de Authentication, en este caso 
Mixed y se ingresa el password del súper usuario “sa”: 


€ SOL Server 2022 Setup 


CAPÍTULO IV: SQL y Sistemas Gestores de Base de 


Datos:SQL Server, MySQL, MariaDB, SQLite, MongoDB | 174 


Database Engine Configuration 


Specity Destabase Engine suthentication security mode, adminsstrators. data directories, TemnpDB, Max degree of 
paraliehsm. Memory limets, and Flestream settings. 


Lucense Terms 

Glotial Rules 

Microsoft Update 

Product Updates 

instail Setup Files 

install Rules 

Agure Extension for SOL Server 
Festure Setection 

Fenture Rules 

instance Configuration 

Server Configuration 
Database Engine Configuration 
Festure Configuration Rules 
Instalistson Progress 
Complete 


Server Configuration Data Dwectones TempD8 Memory Userinstances FILESTREAM 


Specity the suthentication mode and administrator for the Database Engine 


Authentic ator Mode 


() Windows authenticatoa mode 


(6) Mixed Mode (SQL Server authântication and Windows authenticasion) 
Specify the password for the SOL Server system administrator (58) account 


cesso 


Enter password 


Contum passwced jeecaua dá 


Specity SOL Server adiministrators 


ESSO SA Server ssminastrators have unrestncted 


access to the Database Engine. 


Add Current User 


FIGURA Nº 04-015: Authentication Mixed y se ingresa clave del “sa” 


Una vez terminado la instalación si todo está ok saldrá la ventana sugiriendo el 
reinicio de la computadora, así como se muestra en la FIGURA Nº 04-016: 


Computer restart required 


“3 Copy message 


One or more affected files have operations pending. You must restart your computer after the setup 
processis completed. 


FIGURA Nº 04-016: Authentication Mixed y se ingresa clave del “sa” 


Para ver la instancia de SQL Server 2022, en el inicio de Windows seleccionamos: 


to 


I 


1190 |200 « 1300 


na 


TT Microsoft SQL Server 2008 


3 


A Office 


it Microsoft SOL Server 2022 
ueva 
SQL Server 2022 Configuration Man... 


na 


TT MicrosoR SQL Server 2012 


Nueva 


= É] SOL Server 2022 Error and Usage Re... 
— Nueva , 
SQL Server 2022 Import and Export... rias ade | 
remo ant Explorar 
= SOL Server 2022 Installation Center (... 
Nueva 
É Microsoft Store É 
TÃ Microsoft Teams 
Aires Sta 


FIGURA Nº 04-017: En el menú de inicio de Window ya figura el SQL Server 
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En la figura FIGURA Nº 04-018 se puede apreciar que la nueva instancia 
instalada está corriendo: SQL Server (SQLSERVER2022) 


+ Sql Server Configuration Manager 
Archivo Acción Ver Ayuda 
e>|m| lata 


$ SQL Server Configuration Manager (Loc| Name State 
E EpsaoL Ss EMAPA SAN LUIS Run 
B. SQL Server Network Configuration (|| & “ enpes q si - ) ans 
r— á É 2 . Eb SQL Server (ONPE) Running 
SOL Nat ci t 11.0 Confi t 

Eça Peito amina See 'º|| Ep SQL Server (SERVER PRODUCCIO) asno) 
E: SQL Server Network Configuration Eb SQL Server (UNHEVAL) Running 
E SQL Native Client 11.0 Configuratio|| ES'SQL Server Agent (EMAPA SAN LUIS) Stopped 
ES Azure Extension For SOL Server EB SQL Server Agent (ONPE) Stopped 

E SQL Server Agent (SERVER PRODUCCIO) Stopped 


FIGURA Nº 04-018: La instancia SQLSERVER2022 está corriendo 


Para poder tener un entorno de trabajo amigable y poder gestionar nuestra base de 
datos se necesita instalar el SQL Server Management Studio(SSMS) 


“SQL Server Management Studio (SSMS) es un entorno integrado para 
administrar cualquier infraestructura de SQL, desde SQL Server hasta Azure 
SQL Database. SSMS proporciona herramientas para configurar, monitorear y 
administrar instancias de SQL Server y bases de datos. Use SSMS para 
implementar, monitorear y actualizar los componentes del nivel de datos que 
usan sus aplicaciones y crear consultas y scripts. 

Use SSMS para consultar, diseriar y administrar sus bases de datos y almacenes 
de datos, donde sea que estén, en su computadora local o en la nube”. 


https: //learn.microsoft.com/en-us/sgl/ssms/download-sql-server- 


management-studio-ssms?view=sql-server-ver16 
Instalación de SQL Server Management Studio (SSMS) 


Para su instalación se descarga desde la página de Microsoft: 


https: //learn.microsoft.com/en-us/sql/ssms/download-sql-server- 


management-studio-ssms?view=sql-server-ver16 


En la FIGURA Nº 04-019, se muestra el entorno de trabajo del SQL Server 


Management Studio, con las bases de datos creado por defecto: 
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Sa SQLQuery1.sql - DESKTOP-EPTNGFISQLSERVER2022.master (DESKTOP-EPTINGFINACER (69)) - Microsoft SQL Server Management Studio 
File Edit View Project Debug Tools Window Help 

Pd a Std | DNewQuey Ly tb tb | d a] 9 Sim] d 

É dy bg | master ||? Execute b Debug mv 35 3! [37 ua [35560] 


Connect dy 3) = T 2] 25 
[5] tg DESKTOP-EPTINGFINSQLSERVER2022 (SQL Server 16.0.1000 - DESKTOP-EPTNGFINACER) 
E Dm Databases 
System Databases 

E TF] master 

[E3] T) model 

m (9 msdb 

E T) tempdb 
[es] Security 
E DM Server Objects 
E Dm Replication 
E EM Management 


FIGURA Nº 04-019: Entorno de trabajo del SQL Server Management Studio 


Para crear una base de datos, click derecho sobre Databases, tal como se muestra 
en la FIGURA Nº 04-020: 


iz SQLQuery1.sql - DESKTOP-EPTNGFINSQLSERVER2022.master (DESKTOP-EPTNGFIVACER (69) - | 
File Edit View Project Debug Tools Window Help 
Pd |) NwQuey Di tbibib|4 D68|9-€ q] 


is tg | master - | ? Execute Pp Debug E «/ ao SE | 2a 


ObjectExplorer RX 
Comect- aj 3) m T [2]sá 


[=| iB DESKTOP-EPTNGFINSOLSERVER2022 (SQL Server 16.0.1000 - DESKTOP -EPTNGFIVACER) 


E Databaçs 
PAES 


ag Attach... 

e . Restore Database... 

E 

a Restore Files and Filegroups... 


Deploy Data-tier Application... 


Server k RES 
Ea Replic Import Data-tier Application... 
Em Manag Start PowerShell 


FIGURA Nº 04-020: Creación de una base de datos 


En la ventana que aparece en la FIGURA Nº 04-021, se ingresa el nombre 


de la base de datos, en este caso: sis logistica 
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5 New Database 


- [| x 
Selecta page F E 
Script + [3 Hei 

[A General 5 E he 
[SA Options 
[SA Filegroups Database name sis logistica] 

Owner: <defaut> 

Database files: 


Logical Name File Type  Filegroup 
sis logistica Rows... PRIMARY j 
sis logistica... Log Not Applicable 8 


Autogrowth / Maxsize 
64 MB, Unlimited 
By 64 MB, Uniimited 


Connection 


Server: 
DESKTOP-EPTNGFINSQLSERVE 


Connection: 
DESKTOP-EPTNGFIACER 


2 View connection properties 


Progress 
Ready à 


Add 


FIGURA Nº 04-021: Creación de la base de datos “sis logistica 
También se puede crear la base de datos utilizando sentencia SQL: 


CREATE DATABASE sis logistica, así como se muestra en la FIGURA Nº 
04-022 


ES SQLQuery1.sql - DESKTOP-EPTNGFISQLSERVER2022.master (DESKTOP-EPTNGFINACER (69))* - Microsoft SQL Server Mi 
File Edit View Query Project Debug Tools Window Help 
Pd ciriS td |) NewQuey Ly ipi 

É 37 ty | master IN 


qa id 9-e-g-Gig]» 


Object Explorer 


Comet diam TE] d CREATE DATABASE sis logistica 
[2] 7) DESKTOP-EPTNGFINSOLSERVERZ2) 
E Dm Databases 
E DM System Databases 


= [9 master AE 

m [9 model ; 

[E] T msdb Lã Messages 
m [9 tempdb 


Command(s) completed successfully. 
E Security 


E Server Objects 
E Replication 
E Management 


FIGURA Nº 04-021: Creación de base de datos, con sentencia SQL 
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EJEMPLO Nº04-002 
Se tiene el siguiente sistema para desarrollar: 


En el proceso de “Bienes y Suministros” de la empresa de turismo “Pata 
Amarilla” que pertenece al área de Administración, se realizan las actividades 
de manera manual, por lo que se requiere sistematizar todo ello con la ayuda de 
un software, el duefio del proceso de "Bienes y Suministros" detalla el 


procedimiento y actividades de cada área: 


Y. El proceso involucra cinco (5) áreas: Administración, Logística, Almacén, 


Patrimonio, Áreas usuarias. 
” El área de Logística funciona de la siguiente forma: 


> Recibe las solicitudes de requerimientos de bienes o suministros de las 


diferentes áreas de la empresa. 
> Cada solicitud tiene un responsable que está adscrito a un área. 


> Cada solicitud es autorizada por el jefe del área y posteriormente por el 


área de Administración. 


> De la solicitud se requiere la siguiente información: Número de la 
solicitud (consecutivo), fecha, responsable, área, meta presupuestal. En 
cada solicitud se pueden contener uno o muchos ítems con la siguiente 
información: código, nombre del ítem, cantidad solicitada, unidad de 


medida, valor unitario. 


> Cada ítem es identificado por un código único y es de carácter devolutivo 
(suministro) (útiles de escritorio, útiles de limpieza, etc.) o un bien 


(computadora, escritorio, etc.). 


> La solicitud es enviada al área de Logística para atender si es que hay en 
stock o realizar la compra a uno o varios proveedores. Para realizar la 
compra se juntan todas las solicitudes para tener la cantidad total de ítems 


de cada rubro a comprar. 


> Las cotizaciones son realizadas con uno o varios proveedores de los bienes 


solicitados. 


> Para de un producto, primero se realiza la cotización a dos o tres 
proveedores para determinar la mejor oferta en calidad y precio que 
ofrecen, una vez elegido el proveedor se genera la orden de compra, con 


los siguientes datos: número de orden de compra, nombre del 
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proveedor al cual se le va a realizar la compra, fecha de la orden, monto 
total de la orden, fecha de entrega. Cada orden puede tener asociado uno 
o varios ítems, cada ítem debe tener los siguientes datos: código del ítem, 
nombre del ítem, cantidad de compra, unidad de medida del ítem, valor 


unitario y sub total. 


> La orden de compra es aprobada por el área de Administración luego el 


área de Logística envía o hace entrega al proveedor elegido. 
” | Elárea de Almacén funciona de la siguiente forma: 


> Recepciona los bienes que llegan de los proveedores y distribuye con una 


pecosa a las áreas que realizaron las solicitudes. 


> El proveedor hace entrega a Almacén los ítems detallados en la Orden de 
Compra, para ello adjunta la guía de remisión y factura para su pago 
correspondiente si todo está conforme, se registra una entrada de almacén 
por cada factura relacionada, con los siguientes datos: número de entrada, 
fecha, número de factura, Proveedor, total bienes, valor total, los ítems 


recibidos con la cantidad respectiva. 


> El área de Almacén hace entrega de los bienes a las diferentes áreas 
solicitantes atreves de una pecosa detallando cada ítem entregado y otros 
datos más como el número de salida, empleado solicitante del ítem o los 


ítems, cantidad, fecha de salida, fecha de entrega. 
Y El área Patrimonio es responsable de: 


> Administrar y controlar la ubicación de los bienes dentro de la empresa, 
por esto antes de que el bien salga del Almacén es codificado y se genera 


su estiker que se pega al bien. 


> Cada trabajador tiene a su cargo una o varios bienes, esto permite 


controlar su ubicación. 


Disefiar las tablas en SQL Server, para poder almacenar los datos de que responda 
al sistema de “Bienes y Suministros” de la empresa de turismo “Pata 
Amarilla”. 
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DESARROLLO 


Para el sistema de acuerdo a los requerimientos y descripción de datos se puede 
considerar las siguientes tablas: 
- Área 

- Trabajador 

- cargo 

- Contrato 

- Ítem 

- Categoría 

-  Unidad medida 

- Solicitud 

- Metas presupuestal 

- Orden compra 


- | proveedor 


Relacionando las tablas se disefia el modelo lógico mostrado en la FIGURA Nº 04-022: 


metas 


descripcion meta cargo 


monto asignado E 


contrato 


solicitud 


numero solicitud 


responsable (FK) 
fecha solicitud 

id meta (FK) 
autorizacion jefe area apellidos 
autorizacion administracion nombres 
numero pecosa 


categoria 


descripcion 
7 


trabajador 


numero contrato 


fecha contrato 
fecha inicio 
fecha termino 


A sueldo. neto 
| fecha salida filsfno DNI (FI) 
| fecha entrega correo id area (FK) 
é id cargo (FK) 


jefe area 


numero solicitud (FK) 
id item (FK) 


descripcion item unidad 
stock cantidad solicitado 
precio cantidad entregado 
tipo precio 
id categoria (FK) 
id unidad medida (FO) P——————— 


unidad medida 
id unidad medida 


descripcion 
abreviatura 


codigo. patrimonial 
id item (FK) 
DNI(FK) 


orden compra detalle orden compra proveedor 


numero orden compra (FK) 
id item (FK) 


unidad 
cantidad solicitado 

cantidad entregado 
precio 


numero orden compra | 


4 nombre proveedor k 
direccion 
telefono 
correo 

representante legal 


fecha orden compra 
fecha entrega 

fecha entregado à 
numero facura entrega | 
RUC (FK) 


autoriza administracion | 


FIGURA Nº 04-022: Modelo lógico de la base de datos logística 
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Script de creación de las tablas en SQL Server: 
CREATE TABLE area 


( 
id area int NOT NULL , 
dependencia int NULL, 
nombre varchar(89) NULL 

) 

go 


ALTER TABLE area 
ADD CONSTRAINT XPkKarea PRIMARY KEY  NONCLUSTERED (id area 
ASC) 


go 


CREATE TABLE bien 


( 
id bien char(18) NOT NULL , 
codigo patrimonial  char(18) NULL, 
id item char(19) NULL, 
DNI char(8) NULL 
) 
go 


ALTER TABLE bien 
ADD CONSTRAINT XPKbien PRIMARY KEY NONCLUSTERED (id bien 
ASC) 


go 


CREATE TABLE cargo 


( 
id cargo int NOT NULL , 


descripcion varchar(89) NULL 


go 


CAPÍTULO IV: SQL y Sistemas Gestores de Base de 
Datos:SQL Server, MySQL, MariaDB, SQLite, MongoDB 


ALTER TABLE cargo 

ADD CONSTRAINT XPKcargo PRIMARY KEY  NONCLUSTERED 
(id cargo ASC) 
go 


CREATE TABLE categoria 


( 
id categoria int NOT NULL , 
descripcion varchar(1090) NULL 
) 
go 


ALTER TABLE categoria 


ADD CONSTRAINT XPKcategoria PRIMARY KEY  NONCLUSTERED 


(id categoria ASC) 
go 


CREATE TABLE contrato 


( 
numero contrato char(10) NOT NULL ,, 
fecha contrato datetime NULL, 
fecha inicio datetime NULL, 
fecha termino datetime NULL, 
sueldo neto FLOAT NULL, 
DNI char(8) NULL, 
id area int NULL, 
id cargo int NULL, 
jefe area int NULL 

) 

go 


ALTER TABLE contrato 
ADD CONSTRAINT XPKcontrato PRIMARY KEY  NONCLUSTERED 


(numero contrato ASC) 


go 
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CREATE TABLE item 

( 
id item 
descripcion item 
stock 
precio 
tipo 
id categoria 


id unidad medida 


ALTER TABLE item 


char(10) 

varchar(8 
FLOAT NU 
FLOAT NU 
CHAR(1) 

int NULL 
int NULL 


NOT NULL 
0) NULL 


Eb, s 
LÊ 5 
NULL 


+ 


E) 


, 


+ 
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ADD CONSTRAINT XPKitem PRIMARY KEY NONCLUSTERED (id item 


ASC) 
go 


CREATE TABLE metas 

( 
id meta 
descripcion meta 
monto asignado 
anio fiscal 

) 

go 


ALTER TABLE metas 


int NOT 
varchar(8 
FLOAT NU 
int NULL 


NULL 


0) NULL 


LL, 


E) 


, 


ADD CONSTRAINT XPKpetas PRIMARY KEY NONCLUSTERED (id meta 


ASC) 
go 


CREATE TABLE orden compra 


( 


numero orden compra 


fecha orden compra 


fecha entrega 


char(10) 
datetime 


datetime 


NOT NULL 


NULL 
NULL 


+ 


B) 


+ 
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RUC char(11) NULL, 
autoriza administracion int NULL, 
fecha entregado char(18) NULL, 
numero facura entrega char(18) NULL 
) 
go 


ALTER TABLE orden compra 


ADD CONSTRAINT XPKorden compra PRIMARY KEY  NONCLUSTERED 
(numero orden compra ASC) 


go 


CREATE TABLE orden compra detalle 


( 
unidad char(18) NULL, 
cantidad solicitado char(18) NULL, 
precio char(18) NULL, 
numero orden compra char(10) NOT NULL , 
id item char(10) NOT NULL , 
cantidad entregado  char(18) NULL 

) 

go 


ALTER TABLE orden compra detalle 


ADD CONSTRAINT XPKorden compra detalle PRIMARY KEY 
NONCLUSTERED (numero orden compra ASC,id item ASC) 


go 


CREATE TABLE proveedor 


( 
RUC char(11) NOT NULL , 
nombre proveedor varchar(89) NULL, 
direccion varchar(89) NULL, 


telefono varchar(30) NULL, 
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correo varchar(30) NULL, 


representante legal varchar(100) NULL 


) 
go 


ALTER TABLE proveedor 


ADD CONSTRAINT XPKproveedor PRIMARY KEY NONCLUSTERED (RUC 
ASC) 


go 


CREATE TABLE solicitud 


( 
numero solicitud char(18) NOT NULL , 
responsable char(8) NULL, 
fecha solicitud char(18) NULL, 
id meta int NULL, 
autorizacion jefe area int NULL, 
autorizacion administracion int NULL, 
numero pecosa char(18) NULL, 
fecha salida char(18) NULL, 
fecha entrega char(18) NULL 

) 

go 


ALTER TABLE solicitud 


ADD CONSTRAINT XPkKsolicitud PRIMARY KEY  NONCLUSTERED 
(numero solicitud ASC) 


go 


CREATE TABLE solicitud detalle 

( 
unidad char(18) NULL, 
cantidad solicitado char(18) NULL, 


numero solicitud char(18) NOT NULL , 
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id item char(10) NOT NULL ,, 
precio char(18) NULL, 


cantidad entregado  char(18) NULL 


) 
go 


ALTER TABLE solicitud detalle 


ADD CONSTRAINT XPksolicitud detalle PRIMARY KEY 
NONCLUSTERED (numero solicitud ASC,id item ASC) 


EO 


CREATE TABLE trabajador 


( 
DNI char(8) NOT NULL , 
apellidos varchar(590) NULL, 
nombres varchar(50) NULL, 
direccion varchar(59) NULL, 
telefono varchar(30) NULL, 
correo varchar(30) NULL 

) 

go 


ALTER TABLE trabajador 


ADD CONSTRAINT XPKtrabajador PRIMARY KEY NONCLUSTERED 
(DNI ASC) 


go 


CREATE TABLE unidad medida 


( 
id unidad medida int NOT NULL , 
descripcion VARCHAR(80) NULL, 
abreviatura VARCHAR (59) NULL 


go 
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ALTER TABLE unidad medida 


ADD CONSTRAINT XPkKunidad medida PRIMARY KEY | NONCLUSTERED 
(id unidad medida ASC) 


go 


ALTER TABLE area 


ADD CONSTRAINT id area dependencia FOREIGN KEY 
(dependencia) REFERENCES area(id area) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE bien 


ADD CONSTRAINT R 16 FOREIGN KEY (id item) REFERENCES 
item(id item) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE bien 


ADD CONSTRAINT R 17 FOREIGN KEY (DNI) REFERENCES 
trabajador (DNI) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE contrato 


ADD CONSTRAINT R 3 FOREIGN KEY (DNI) REFERENCES 
trabajador (DNI) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE contrato 
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ADD CONSTRAINT R 4 FOREIGN KEY (id area) REFERENCES 
area(id area) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE contrato 


ADD CONSTRAINT R 5 FOREIGN KEY (id cargo) REFERENCES 
cargo(id cargo) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE item 


ADD CONSTRAINT R 6 FOREIGN KEY (id categoria) REFERENCES 
categoria(id categoria) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE item 


ADD CONSTRAINT R 18 FOREIGN KEY (id unidad medida) 
REFERENCES unidad medida(id unidad medida) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE orden compra 


ADD CONSTRAINT R 15 FOREIGN KEY (RUC) REFERENCES 
proveedor (RUC) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE orden compra detalle 
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ADD CONSTRAINT R 13 FOREIGN KEY (numero orden compra) 
REFERENCES orden compra(numero orden compra) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE orden compra detalle 


ADD CONSTRAINT R 14 FOREIGN KEY (id item) REFERENCES 
item(id item) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE solicitud 


ADD CONSTRAINT R 7 FOREIGN KEY (responsable) REFERENCES 
trabajador (DNI) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE solicitud 


ADD CONSTRAINT R 8 FOREIGN KEY (id meta) REFERENCES 
metas(id meta) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE solicitud detalle 


ADD CONSTRAINT R 11 FOREIGN KEY (numero solicitud) 
REFERENCES solicitud(numero solicitud) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


ALTER TABLE solicitud detalle 
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ADD CONSTRAINT R 12 FOREIGN KEY (id item) REFERENCES 
item(id item) 


ON DELETE NO ACTION 
ON UPDATE NO ACTION 


go 


Se ejecuta en la ventana de consultas del SQL Server Management Studio, y se 
tendría todas las tablas creadas en SQL Server, tal como se muestra en la FIGURA 
Nº 04-023: 


[=] Iô DESKTOP-EPTNGFISOLSERVER2022 (SQL Server 16.0.1000 - DESKTOP- 
E Ed Databases 
E [mM System Databases 
ar 
=) [mM Database Diagrams 
E Lã Tables 

3] System Tables 
[a FileTables 
5 dbo.area 
O dbo.bien 
5] dbo.cargo 
 dbo.categoria 
DS dbo.contrato 
O dbo.item 
3 dbo.metas 
E dbo.orden compra 
E dbo.orden compra detalle 
DS dbo.proveedor 
O dbo.solicitud 
O dbo.solicitud detalle 
DS dborabajador 
O dbo.unidad medida 
Em Views 
Lã Synonyms 
La Programmability 
La Service Broker 
Lã Storage 
ma Security 


Hot tt tt tt tt tt 


GROSSO NONCNS 


E E E E EH 


+ 


FIGURA Nº 04-023: Tablas de la base de datos logistica en SQL Server 
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Gestor de Base de Datos MySQL y MariaDB 
MySQL y MariaDB, son dos gestores de base de datos muy parecido de código 
abierto. Funcionan con un modelo cliente-servidor, son multiplataforma, por lo 
que se puede instalar en Windows, Linux entre otros sistemas operativos. 


Algunas características de MySQL: 


Y” Sirve para crear y manejar de bases de datos relacionales 

Y Implementa varios motores de almacenamiento con características y 
velocidades distintas. 

Y Software libre y gratuito para el uso en su versión de la comunidad 

Y Dispone de una arquitectura cliente / servidor y la instalación proporciona tanto 
el programa de cliente (por línea de comandos) como el del servidor (sistema 
gestor de la base de datos en sí) 

Y Sistema ligero, fácil de usar, fácil de mantener. 


Y Es robusto y seguro. 


Instalacion de MySQL 


Para la instalación de MySQL, se descarga desde su página oficial: 


https://www.mysql.com/ 


[6) B https://www.mysql.com 


e OK 


Póngase en contacto con M! 


MySOL. MYSQLCOM DESCARGAS DOCUNENTACIÓN ZONA DE DESARROLLADORES 


roductos Nube Servicios Socios Clientes «Por qué MySQL? Noticiasy Eventos Cómo comprar 


MySQL Enterprise Edition 


* Transparent Data Encryption (TDE) 
* Data Masking & De-identification 
* Database Firewall 

* Database Audit 

* More! 


LEARN MORE 


FIGURA Nº 04-024: Página oficial de MySQL 
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Otra alternativa para instalar MariaDB o MySQL con: Xampp, AppServ, WampServer 
que también a su vez instala Apache + PHP + MySQL o MariaDB. 


En la FIGURA Nº 04-025 se muestra la página oficial de descarga del instalador 
del XAMPP: 
https://www.apachefriends.org/es/index.html 


(=) XAMPP Apache + MariaDB + PHP + Perl 


é Qué es XAMPP? 


XAMPP es el entorno más popular de 
desarrollo con PHP 


XAMPP es una distribución de Apache completamente gratuita y 
fácil de instalar que contiene MariaDB, PHP y Perl. El paquete de 
instalación de XAMPP ha sido disefiado para ser increíblemente 
fácil de instalar y usar. 


XAMPP 


Descargar EE XAMPP para À. XAMPP para Linux É XAMPP para Os X 
Pulsa aquí para otras versiones Windows 824(PHP82.4) 8.24 (PHP 824) 
8.2.4 (PHP 8.2.4) 


FIGURA Nº 04-025: Página oficial para descargar el instalador de XAMPP 


Una vez instalado el XAMPP con su panel de control se pone en marcha los 


servidores Apache y MySQL tal como se muestra en la FIGURA Nº 04-026: 


[E] xaMpP Control Panel v3.3.0 [ Compiled: Apr 6th 2021] = [m x 
XAMPP Control Panel v3.3.0 
Module 
Dienst  Modul PID(s) Port(s) Aktionen (9) Netstat 
1891 
CR — [fo Ee 
20916 3306 || Stoppen || Admin Konfig Logs [1 Explorer 
Filezila Starten Admin Konfig Logs E! Dienste 
Mercury Starten Admin Konfig Logs “ Hife 
Tomcat Starten Admin Konfig Logs [E] Beenden 


Initialisere Control Panel a 
Windows Version: Enterprise 64-bit 

XAMPP Version: 8.1.12 

Control Panel Version: 3.3.0 [ Compiled: Apr 6th 2021 ] 

Dein Benutzerprofil besitzt keine Administratorenrechte! Das reicht aus fir die meisten 

Anwendungsfunktionen, aber wann immer du etwas mit Windows-Diensten tun môchtest, 

wird eine Sicherheitsabfrage erscheinen oder etwas wird garnicht erst funktionieren! 

Also denke daran diese Anwendung mit Administratorrechten zu starten! 

XAMPP Installationsverzeichnis: “c:ixamppl” 

Voraussetzungen werden geprúft 

6 Alle Voraussetzungen sind erfillt 

0:46:40 [main] Initialisiere Module v 


FIGURA Nº 04-026: Panel de control del XAMPP 
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Para tener un entorno de trabajo más amigable en modo gráfico con MySQL o 
MariaDB, se podría utilizar el MySQL Workbench o el phpMyAdmin en 
entorno web. En la FIGURA Nº 04-027 tenemos la interfaz del phpMy Admin, que 
se accede poniendo en la barra de direcciones de cualquier navegador web: 


localhost:8080/phpmyadmin (el 8080 depende del puerto del servidor web) 


€ 353 C dO localhost8080/phpmyadmin/ Q rm xl 
PhPMyAdmiA 
281 o 3e Bases dedatos |] sQL &, Estadoactual =" Cuentas de usuarios =) Exportar ||) Importar 


Reciente Favoritas 


- “oniiguraciones generales | Servidor de base de datos 
[e Nueva E E 
FP” beneficencia = Cotejamiento de la conexión al servidor: 4) ERES ETvido rede eo O via Res 
1d information schema * Tipo de servidor: MariaDB 
+ mysql uirembA unicode. há * Conexión del servidor: No se está utili; 
e performance schema &* Más configuraciones SSL 4 


+» phpmyadmin * Versión del servidor: 10.4.27-MariaDB 
| : a mariadb.org binary distribution 
+— > sis academico 


| : , Eh 
DG tes Ta SiS Sd Versión del protocolo: 10 


e Usuario: rootdlocalhost 


FIGURA Nº 04-027: la Interfaz del phoMyAdmin 


EJEMPLO Nº04-003 


Del EJEMPLO Nº04-002, crear la base de datos logistica y todas sus tablas en 
MySQL. 


DESARROLLO 


El modelo lógico vendría a ser lo mismo mostrado en la FIGURA Nº 04-022 


Script de creación de las tablas en MySQL: 


CREATE TABLE area 


( 
id area INTEGER NOT NULL, 
dependencia INTEGER NULL, 
nombre varchar(80) NULL 
); 


ALTER TABLE area 
ADD PRIMARY KEY (id area); 
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CREATE TABLE bien 


( 
id bien CHAR(18) NOT NULL, 


codigo patrimonial  char(18) NULL, 

id item char(19) NULL, 

DNI char(8) NULL 
)5 


ALTER TABLE bien 
ADD PRIMARY KEY (id bien); 


CREATE TABLE cargo 


( 
id cargo INTEGER NOT NULL, 


descripcion varchar(89) NULL 


)5 


ALTER TABLE cargo 
ADD PRIMARY KEY (id cargo); 


CREATE TABLE categoria 


( 
id categoria INTEGER NOT NULL, 


descripcion varchar(100) NULL 
)5 


ALTER TABLE categoria 
ADD PRIMARY KEY (id categoria); 


CREATE TABLE contrato 
( 
numero contrato char(10) NOT NULL, 


fecha contrato datetime NULL, 
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fecha inicio 
fecha termino 
sueldo neto 
DNI 

id area 

id cargo 

jefe area 


)3 


ALTER TABLE contrato 


datetime NULL, 
datetime NULL, 
FLOAT NULL, 
char(8) NULL, 
INTEGER NULL, 
INTEGER NULL, 
INTEGER NULL 


ADD PRIMARY KEY (numero contrato); 


CREATE TABLE item 
( 
id item 
descripcion item 
stock 
precio 
tipo 
id categoria 
id unidad medida 


)3 


ALTER TABLE item 
ADD PRIMARY KEY (id item); 


CREATE TABLE metas 

( 
id meta 
descripcion meta 
monto asignado 
anio fiscal 


)3 


char(10) NOT NULL, 
varchar(890) NULL, 
FLOAT NULL, 

FLOAT NULL, 
CHAR(1) NULL, 
INTEGER NULL, 
INTEGER NULL 


INTEGER NOT NULL, 
varchar(89) NULL, 
FLOAT NULL, 
INTEGER NULL 
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ALTER TABLE metas 
ADD PRIMARY KEY (id meta); 


CREATE TABLE orden compra 

( 
numero orden compra char(10) NOT NULL, 
fecha orden compra datetime NULL, 
fecha entrega datetime NULL, 
RUC char(11) NULL, 
autoriza administracion INTEGER NULL, 
fecha entregado CHAR(18) NULL, 


numero facura entrega CHAR(18) NULL 
)5 


ALTER TABLE orden compra 
ADD PRIMARY KEY (numero orden compra); 


CREATE TABLE orden compra detalle 

( 
unidad CHAR(18) NULL, 
cantidad solicitado CHAR(18) NULL, 
precio CHAR(18) NULL, 
numero orden compra char(10) NOT NULL, 
id item char(10) NOT NULL, 
cantidad entregado CHAR(18) NULL 

)5 


ALTER TABLE orden compra detalle 
ADD PRIMARY KEY (numero orden compra,id item); 


CREATE TABLE proveedor 
( 
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RUC 

nombre proveedor 
direccion 
telefono 

correo 


representante legal 


)3 


ALTER TABLE proveedor 
ADD PRIMARY KEY (RUC); 


CREATE TABLE solicitud 
( 
numero solicitud 
responsable 
fecha solicitud 


id meta 


char(11) NOT NULL, 
varchar(89) NULL, 
varchar(89) NULL, 
varchar(30) NULL, 
varchar(30) NULL, 
varchar(1900) NULL 


CHAR(18) NOT NULL, 
char(8) NULL, 
CHAR(18) NULL, 
INTEGER NULL, 


autorizacion jefe area INTEGER NULL, 


autorizacion administracion INTEGER NULL, 


numero pecosa 
fecha salida 


fecha entrega 


)3 


ALTER TABLE solicitud 


CHAR(18) NULL, 


CHAR(18) NULL, 


CHAR(18) NULL 


ADD PRIMARY KEY (numero solicitud); 


CREATE TABLE solicitud detalle 


( 
unidad 
cantidad solicitado 
numero solicitud 


id item 


CHAR(18) NULL, 


CHAR(18) NULL, 
CHAR(18) NOT NULL, 


char(10) NOT NULL, 
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precio CHAR(18) NULL, 
cantidad entregado CHAR(18) NULL 


)3 


ALTER TABLE solicitud detalle 
ADD PRIMARY KEY (numero solicitud,id item); 


CREATE TABLE trabajador 


( 
DNI char(8) NOT NULL, 
apellidos varchar(50) NULL, 
nombres varchar(50) NULL, 
direccion varchar(50) NULL, 
telefono varchar(30) NULL, 
correo varchar(30) NULL 


)3 


ALTER TABLE trabajador 
ADD PRIMARY KEY (DNI); 


CREATE TABLE unidad medida 
( 


id unidad medida INTEGER NOT NULL, 
descripcion VARCHAR(80) NULL, 
abreviatura VARCHAR (50) NULL 


)3 


ALTER TABLE unidad medida 
ADD PRIMARY KEY (id unidad medida); 


ALTER TABLE area 


ADD FOREIGN KEY id area dependencia (dependencia) REFERENCES 
area (id area); 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 
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bien 


KEY R 16 (id item) REFERENCES item (id item); 


bien 


KEY R 17 (DNI) REFERENCES trabajador (DNI); 


contrato 


KEY R 3 (DNI) REFERENCES trabajador (DNI); 


contrato 


KEY R 4 (id area) REFERENCES area (id area); 


contrato 


KEY R 5 (id cargo) REFERENCES cargo (id cargo); 


item 


KEY R 6 (id categoria) REFERENCES categoria 


(id categoria); 


ALTER TABLE 


item 
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ADD FOREIGN KEY R 18 (id unidad medida) REFERENCES unidad medida 
(id unidad medida); 


ALTER TABLE 
ADD FOREIGN 


ALTER TABLE 
ADD FOREIGN 


orden compra 


KEY R 15 (RUC) REFERENCES proveedor (RUC); 


orden compra detalle 


KEY R 13 (numero orden compra) REFERENCES 


orden compra (numero orden compra); 


ALTER TABLE 
ADD FOREIGN 


orden compra detalle 


KEY R 14 (id item) REFERENCES item (id item); 
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ALTER TABLE solicitud 
ADD FOREIGN KEY R 7 (responsable) REFERENCES trabajador (DNI); 


ALTER TABLE solicitud 
ADD FOREIGN KEY R 8 (id meta) REFERENCES metas (id meta); 


ALTER TABLE solicitud detalle 


ADD FOREIGN KEY R 11 (numero solicitud) REFERENCES solicitud 
(numero solicitud); 


ALTER TABLE solicitud detalle 
ADD FOREIGN KEY R 12 (id item) REFERENCES item (id item); 


Se ejecuta en la ventana de consultas del SQL phpMyAdmin, y se tendría todas 


las tablas creadas en MySQL, tal como se muestra en la FIGURA Nº 04-028: 


E] Servidor 127.001 » (8 Base de datos: logistica 


phpMyAdmin 
2890156 


Reciente Favoritas 


Dm Estructura [] SQL 4 Buscar |) Generarunaconsulta =) Exportar 
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m 
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FIGURA Nº 04-028: Tablas de la base de datos logistica creadas en MySQL 
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Poblado y consultas SQL a la Base de datos 
Insertando datos a algunas tablas: 
Tabla unidad medida 


INSERT INTO unidad medida (id unidad medida, descripcion, 
abreviatura) VALUES 


(1, "ACCION', 'ACCION'), 

(2, "ACERVO", "ACERVO!), 

(52, 'EXPEDIENTE PROCESADO", 'EXPEDIEN'), 
(53, "EXPEDIENTE RESUELTO", 'EXPEDIEN'), 
(54, 'EXPEDIENTE TECNICO', 'EXPEDIEN'), 

(55, "EXPEDIENTE TRAMITADO', 'EXPEDIEN'), 
(56, "FAMILIA", 'FAMILIA!), 

(57, 'FOLLETO", 'FOLLETO'), 

(67, 'KILOMETRO!, 'KILOMETR'), 

(68, 'LICENCIA", 'LICENCIA'), 

(69, 'M2', 'M2!), 

(70, 'M3!, 'M3!), 

(72, 'MAPA!, 'MAPA!), 

(73, 'METRO", 'METRO'), 

(74, 'METRO LUZ", "METRO LU"), 

(126, 'PAQUETE ESCOLAR", 'PAQUETE '), 

(127, "PLANTAS", 'PLANTAS'), 

(128, 'KILOGRAMO!, 'KLG'), 

(129, 'DIQUE', 'DIQUE'), 

(162, 'NUEVOS SOLES!, 'NUEVOS SOLES'), 

(163, 'DOLARES!, 'DOLARES'), 

(164, 'LT./SEG.', 'LT./SEG.'), 

(172, 'GLOBAL", 'GLOBAL'), 

(173, 'CASOS RESUELTOS", 'CASOS RESUELTOS'), 
(174, 'NORMAS APROBADAS', 'NORMAS APROBADA!), 
(175, 'APELACIONES RESUELTAS", 'APELACIONES RES"), 
(176, 'PASAJEROS/DIA', 'PASAJEROS/DIA!), 
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(177, 'TRANSFERENCIA!", 'TRANSFERENCIA!), 

(178, 'MEDIDAS CAUTELARES', 'MEDIDAS CAUTELA!'), 
(181, "HORAS", 'HORAS'), 

(182, 'LOCAL", 'LOCAL'), 

(183, 'ACCIONES DE AUDITORIA!, 'ACCIONES DE AUD'), 
(185, 'CRIADERO', 'CRIADERO'), 

(186, "KW", "KW'), 

(187, 'ASPERSORES", 'ASPERSORES'), 

(188, 'AUTORIDADES", 'AUTORIDADES'), 

(189, 'TELEFONOS EN ZONAS RURALES'", 'TELEFONOS EN Z'), 
(199, 'NUMERO", 'NUMERO!), 

(191, 'PERSONA PROTEGIDA', 'PERSONA PROTEGI'), 
(192, 'CATALOGO', 'CATALOGO'), 

(193, 'QUINTAL!, 'QUINTAL'); 


Tabla categoría: 

INSERT INTO categoria (id categoria, descripcion) VALUES 
(1, 'MATERIAL DE GUERRA!), 

(2, "OBRAS RELACIONADAS CON LA AGRICULTURA"), 

(3, 'ACONDICIONAMIENTO!), 

(4, 'ABRASIVOS"), 

(5, "OBRAS RELACIONADAS CON EL TRANSPORTE"), 

(6, "SERVICIOS RELACIONADOS CON LA ENERGIA NUCLEARES"), 
(7, "OBRAS RELACIONADAS CON LA ENERG?A Y MINER?A'), 


(8, "ALAMBRES, BARRAS, PLANCHAS, PERFILES Y SIMILARES DE 
METAL"), 


(9, "ALIMENTACI?N'), 

(10, 'AGR?COLA Y PESQUERO"), 

(11, "OBRAS RELACIONADAS CON EL TURISMO'), 

(12, "OBRAS RELACIONADAS CON LA VIVIENDA Y CONSTRUCCI?N'), 


(13, "SERVICIOS RELACIONADOS CON ALOJAMIENTOS Y ASISTENCIA PARA 
VIAJES'), 


(14, "AGROPECUARIA, GANADER?A Y JARDINER?A : REPUESTOS, 
ACCESORIOS Y MATERIALES'), 
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(15, “AIRE ACONDICIONADO Y REFRIGERACI?N : REPUESTOS Y 
ACCESORIOS '), 


(16, 'SERVICIO DE ASEO Y LIMPIEZA'), 

(17, "OBRAS RELACIONADAS CON LAS COMUNICACIONES'), 

(18, "OBRAS RELACIONADAS CON LA ZOOLOGIA"), 

(19, 'ASESOR?A, CONSULTOR?A E INTERVENCIONES ESPECIALIZADAS '), 


(20, 'AISLANTES T?RMICOS Y AC?STICOS, REFRACTARIOS, FILTROS Y 
PURIFICADORES'), 


(21, 'CONTRATACI?N ADMINISTRATIVA DE SERVICIOS - CAS'), 
(22, "SERVICIOS NO PERSONALES'), 

(23, "ALIMENTOS PARA ANIMALES'), 

(24, "SERVICIOS PRESTADOS POR TERCEROS'), 

(25, "ALIMENTOS Y BEBIDAS PARA PERSONAS'), 

(26, "ATENCIONES Y CELEBRACIONES'), 


(27, "ARMAMENTO, MUNIC.. Y EXPLOS. : RPTOS, ACCESORIOS Y 
MATERIALES"'), 


(28, "AIRE ACONDICIONADO Y REFRIGERACI?N'), 
(29, "SERVICIOS RELACIONADOS CON LAS CONSTRUCCIONES.'), 


(30, 'SERVICIOS RELACIONADOS CON EL MEDIO AMBIENTE Y 
SANEAMIENTO'), 


(31, 'EQUIPOS PARA ARTES GR?FICAS E IMPRESIONES : REPUESTOS Y 
ACCESORIOS '), 


(32, 'ASEO, LIMPIEZA Y TOCADOR : REPUESTOS, ACCESORIOS, 
"TILES Y MATERIALES'), 


(33, "SERVICIOS RELACIONADOS CON FINANZAS E INVERSIONES Y 
SIMILARES"), 


(34, "BIENES DE ACTIVO FIJO NO CATALOGADOS POR SBN'); 


Tabla ítem: 


INSERT INTO item (id item, descripcion item, stock, precio, 
tipo, id categoria, id unidad medida) VALUES 


('1', 'PIEDRA ESMERIL CIRCULAR 2 in X 10 in GRANO GRUESO', O, 0, 

Re, 2, 142); 

('10', 'LIJA CIRCULAR PARA FIERRO Nº? 24', 0, O, 'B', 2, 112), 

('100', 'ACERO REDONDO ST37 ? 5/8 in', 0, 0, 'B', 3, 73), 
B 


('1000'", "CAFE INSTANTANEO X 7 G', 0, O, 'B', 9, 358), 
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('1001', 'AVENA X 200 G X 24 UNI", O, O, 'B', 9, 335), 
('1002', 'LENTEJA X 20 KG", O, O, 'B', 9, 378), 
('1003', 'ARROZ CORRIENTE X 48 kg', O, O, 'B', 9, 378), 
('1004', 'FRIJOL 0J0 DE PALOMA", O, O, 'B', 9, 128), 
('1005', 'FREJOL DE SOYA", O, O, 'B', 9, 128), 

('1006', '"KINICHA ENTERA TOSTADA', O, O, 'B', 9, 128), 
('1007', 'CEBADA TOSTADA", O, O, 'B', 9, 128), 

('1008', 'MAIZENA', O, O, 'B', 9, 128), 

('1009', 'CREMA DE CHOCLO X 5 kg', O, O, 'B', 9, 112), 


('101', 'ACERO REDONDO TREFILADO SAE 1020 ? 1/4", 0, O, 'B', 3, 
73), 


('1010', 'CEBADA!, O, O, 'B', 9, 128), 
('1011', 'CREMA DE HABAS CALIDAD SUPERIOR", O, O, 'B', 9, 128), 
('1012', 'HARINA DE TRIGO X 50 KG', 0, O, 'B', 9, 378), 


('1013', 'SEMOLA X 20 UNIDADES DE 250 GRS C/U', 0, O, 'B', 9, 
352), 


('1014', 'HARINA PREPARADA X KILO X 12 UNIDADES', O, O, 'B', 9, 
352), 


('1015", 'HOJUELA DE KINWICHA ', O, O, 'B', 9, 128), 
('1016', 'CREMA DE ALVEJA!, O, O, 'B', 9, 128), 

('1017', 'HOJUELA DE TRIGO ', O, O, 'B', 9, 128), 

('1018', 'HOJUELA DE QUINUA", O, O, 'B', 9, 128), 

('1019', 'MAIZENA IMPORTADA DE 25 KG', 0, O, 'B', 9, 335), 


('102', 'ACERO REDONDO SAE 4340 (VCN 150) ? 30MM', O, O, 'B', 3, 
73), 


('1020', 'MAIZENA DE 500 G', O, O, 'B', 9, 337), 

('1021', 'HOJUELA DE CEBADA', O, O, 'B', 9, 128), 

('1022', 'HARINA DE HABAS 1 KG X 12 UNI', O, O, 'B', 9, 352), 
('1023', 'HOJUELA DE QUINUA 1 KG X 12 UNI", O, O, 'B', 9, 352), 
('1024', 'CREMA DE ESPARRAGOS X 70 g', O, O, 'B', 9, 112), 
('1025', 'CREMA DE CHAMPIPONES'", O, O, 'B', 9, 128), 

('1026', 'CREMA DE ESPARRAGOS', O, O, 'B', 9, 128), 

('1027', 'QUINUA PERLADA x 50 kg', O, O, 'B', 9, 112), 

('1028', "TRIGO MORON x 25 kg', O, O, 'B', 9, 112), 

('1029', 'HARINA PASTELERA!, O, O, 'B', 9, 128), 
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('103', "ACERO SAE 4140 O CVL 140 REDONDO 81/2 in X 2 MT', 0, 
o, *B', 3, 412), 


('1030', 'MAIZENA X 100 G X 96 UNI", O, O, 'B', 9, 352), 
('1031', 'HOJUELA DE AVENA!", O, O, 'B', 9, 128), 

('1032', 'HOJUELA DE CEREALES', O, O, 'B', 9, 128), 
('1033', 'HOJUELA DE AVENA X 250 g', O, O, 'B', 9, 112), 
('1034', 'HARINA DE PLATANO", O, O, 'B', 9, 128), 

('1035', 'HARINA DE MAIZ', O, O, 'B', 9, 128), 

('1036', 'CREMA DE HABAS', O, O, 'B', 9, 128), 

('1037', 'HOJUELA DE QUINUA AVENA', O, O, 'B', 9, 128), 
('1038', 'HARINA DE TRIGO FORTIFICADO', O, O, 'B', 9, 128), 
('1039', 'CREMA DE HABAS LACTEADA!, O, O, 'B', 9, 128), 


('104', "ACERO SAE 4140 O VCL 140 REDONDO 11 in X 2 MTS', 0, 0, 
Br a qdo); 

('1040', 'HOJUELA DE AVENA X 225 g', O, O, 'B', 9, 112), 
('1041', 'HOJUELA DE AVENA X 450 g', 0, 0, ' 


'B', 9, 128), 


B, 
B', 9, 112), 
('1042', 'HOJUELA DE AVENA ENRIQUECIDA", O, 0, 

('1043', 'HOJUELA DE AVENA X 10 kg', 0, O, 'B', 9, 112), 


('1044', 'HOJUELA DE AVENA ENRIQUECIDA X 500 g', 0, O, 'B', 9, 
112); 


('1045', 'HOJUELA DE CEBADA ENRIQUECIDA', O, O, 'B', 9, 128), 
('1046', "HOJUELA DE CEREAL ENRIQUECIDA", O, O, 'B', 9, 128), 


('1190', "AGUA MINERAL ENVASE NO RETORNABLE CON GAS X 500 ML", 
0, O, 'B', 9, 112), 


('1191', "AGUA MINERAL DE PLASTICO NO RETORNABLE C/GAS X 2 L', 
0, O, 'B', 9, 336), 


('1192', "AGUA MINERAL DE PLASTICO RETORNABLE X 20 L', O, Q, 
"B', 9, 333), 


('1193', "AGUA MINERAL ENVASE NO RETORNABLE S/GAS X 500 ML', O, 
à MB, 9, 112), 


('1194', "AGUA MINERAL VIDRIO RETORNABLE C/GAS X 600 ML', O, 0, 
'B', 9, 336), 


('1195", "AGUA MINERAL VIDRIO RETORNABLE S/GAS X 600 ML', O, 0, 
'B', 9, 336), 


('1196', "AGUA MINERAL DE PLASTICO RETORNABLE X 19 L', 0, OQ, 
'B', 9, 333), 


('1197', "AGUA MINERAL CAJA X 20 L', 0, O, 'B', 9, 337), 
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('1198', "AGUA MINERAL BOTELLA SIN GAS X 02 L X 06 UNI", O, 0, 
'B', 9, 352), 


('1199', "AGUA MINERAL S/GAS EN VASO X 500 ML', 0, O, 'B', 9, 
Tio), 


('12', '"LIJA PARA METAL N? 100 X 50 UNI", O, O, 'B', 2, 112), 


('120', 'PLANCHA DE FIERRO DE 90 cm X 30 cm X 1.5 mm', O, 0, 
E, 3, di), 


('1200', "AGUA MINERAL S/GAS X 500 ML", O, O, 'B', 9, 112), 


('1201', "AGUA MINERAL C/GAS X 500 ML", O, O, 'B', 9, 112), 


('1202', "AGUA MINERAL BOTELLA CON GAS X 02 L X 06 UNI", O, 0, 
'B", 9, 352), 


('1203', "AGUA MINERAL CON GAS EN ENVASE NO RETORNABLE X 625 
ML', 0, O, 'B', 9, 336); 


EJEMPLO Nº04-004 


Del base de datos de “logistica” disefando en el EJEMPLO Nº04-003 hacer las 
siguientes consultas: 


em 


e 


Lista de trabajadores con su respectiva área de trabajo 
Cantidad de trabajadores por área 

Lista de trabajadores por área con su respectivo cargo 
Cantidad de solicitudes por área 

Cantidad de órdenes de compra por proveedor 


Lista de categoría con la cantidad de ítem que pertenecen a dicha categoría 


DESARROLLO 


Lista de trabajadores con su respectiva área de trabajo 
Para esta consulta se: 


Para esta consulta, del modelo lógico mostrado en la FIGURA Nº 04-022, se 
tiene que consultar a las tablas “contrato”, “trabajador”, “area”; como 
la tabla “contrato” está relacionado con “trabajador” por la columna 
común DNI entonces en la cláusula WHERE se tiene que poner esa 
relación. Así mismo la tabla “contrato” está relacionado con “area” por la 
columna común “id area” también en la cláusula WHERE se tiene poner 


esa relación. 


SELECT t.apellidos,t.nombres, a.nombre AS descripcion area 


FROM contrato AS c,trabajador AS t, area AS a 
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WHERE c.DNI=t.DNI and c.id area=a.id area 
ORDER BY t.apellidos ASC 


Cantidad de trabajadores por área 


Para esta consulta, del modelo lógico mostrado en la FIGURA Nº 04-022, se 
tiene que consultar a las tablas “contrato” y “area”; como la tabla 
“contrato” está relacionado con la tabla “area” por la columna común 


“id area” en la cláusula WHERE se tiene poner esa relación. 


SELECT a.nombre AS descripcion area,COUNT(c.DNI) AS cantidad 
FROM contrato AS c, area AS a 

WHERE c.id area=a.id area 

ORDER BY a.nombre ASC 


Lista de trabajadores por área con su respectivo cargo 


Para esta consulta, del modelo lógico mostrado en la FIGURA Nº 04-022, se 
tiene que consultar a las tablas “contrato”, “trabajador”, “area” y 
“cargo”; como la tabla “contrato” está relacionado con “trabajador” por 
la columna común DNIT entonces en la cláusula WHERE se tiene que poner 
esa relación. Así mismo la tabla “contrato” está relacionado con “area” por 
la columna común “id area” también en la cláusula WHERE se tiene que 
poner esa relación. También la tabla “cargo” está relacionado con 
“contrato” por la columna “id cargo”, por lo que se tiene que poner en la 


cláusula WHERE esa relación. 


SELECT t.apellidos,t.nombres, 
a.nombre AS descripcion area, 
ca.descripcion 
FROM contrato AS c,trabajador AS t, area AS a,cargo AS ca 
WHERE c.DNI=t.DNI 
AND c.id area-a.id area 
AND c.id cargo=ca.id cargo 


ORDER BY t.apellidos ASC 


Cantidad de solicitudes por área 
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Para esta consulta, del modelo lógico mostrado en la FIGURA Nº 04-022, se 


3) 66 » 


tiene que consultar a las tablas “solicitud”, “trabajador”, “contrato” y 
“area”; como la tabla “solicitud” está relacionado con “trabajador” por 
la columna responsable y DNI respectivamente entonces en la cláusula 
WHERE se pone esa relación. Así mismo la tabla “trabajador” está 
relacionado con “contrato” por la columna común “DNTY' en la cláusula 
WHERE se pone esa relación. También la tabla “contrato” está 
relacionado con “area” por la columna “id area”, por lo que se pone en la 


cláusula WHERE esa relación. 


SELECT a.nombre, COUNT(s.numero solicitud) AS cant 
FROM solicitud AS s,trabajador AS t, 
contrato AS c,area AS a 
WHERE s.responsable=t.DNI AND t.DNI-=c.DNI AND c.id area-=a.id area 
GROUP BY c.id area 
ORDER BY a.nombre 


Cantidad de órdenes de compra por proveedor 


SELECT p.nombre proveedor, 
COUNT(oc.numero orden compra) AS cant 

FROM proveedor AS p, orden compra AS oc 

WHERE p.RUC=oc.RUC 

GROUP BY p.RUC 

ORDER BY p.nombre proveedor 


Lista de categoría con la cantidad de ítem que pertenecen a dicha 
categoria 


SELECT c.descripcion, COUNT(i.id categoria) 
FROM item AS i, categoria AS c 


WHERE i.id categoria=c.id categoria 
GROUP BY i.id categoria; 
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El resultado de la consulta se muestra en la figura: 


—T> 
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descripcion 

OBRAS RELACIONADAS CON LA AGRICULTURA 
ACONDICIONAMIENTO 

ABRASIVOS 

OBRAS RELACIONADAS CON EL TRANSPORTE 

SERVICIOS RELACIONADOS CON LA ENERGIA NUCLEARES 


OBRAS RELACIONADAS CON LA ENERG?A Y MINER?A 


ALAMBRES, BARRAS, PLANCHAS, PERFILES Y SIMILARES D... 


ALIMENTACI?N 


AGR?COLAY PESQUERO 


OBRAS RELACIONADAS CON EL TURISMO 


OBRAS RELACIONADAS CON LA VIVIENDA Y CONSTRUCCI?N 


SERVICIOS RELACIONADOS CON ALOJAMIENTOS Y ASISTENC... 


count(i.id categoria) 
21 
351 
17 
36 


32 
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Node.JS y Express 
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Programación del lado del 
servidor(backend) 


Para trabajar con base de datos y hacer persistente los datos recogidos desde algún 
formulario diseiado en HTML, CSS y JavaScript dese un browser, se necesita 
programar desde el lado de un servidor web y servidor de base de datos. Hay lenguajes 


de programación con ese propósito: Java, Python, PHP, Ruby, ASP.NET. 


JavaScript permite programar desde el lado del servidor a través de Node.js, un 
entorno de ejecución multiplataforma que tiene todo lo necesario para ejecutar un 
programa desarrollado en JavaScript, así mismo para facilitar el trabajo de desarrollo 


se tiene el framework backend Express.js para Node.js 


5.1. Nodejs > 


Es un entorno de ejecución de JavaScript orientado a eventos asíncronos (evento 
que se ejecuta independientemente del proceso principal de la aplicación en ejecución, 


FIGURA Nº 05-001), para la capa de servidor(backend). 


Para ejecutar código JavaScript se necesitaba un navegador, pero Node.js nos da la 
infraestructura(entorno) en el cual se ejecuta código JavaScript sin la necesidad de 


un navegador. 


Evento asíncrono (que se ejecuta como parte del proceso principal de la aplicación): 


APLICACION 


EVENTO ASINCRONO 


FIGURA Nº 05-001: Evento asíncrono 
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Evento síncrono (que se ejecuta uno de tras de otro bloqueando el proceso principal 
de la aplicación FIGURA Nº 05-002): 


APLICACION 


——— —s 


EVENTO SINCRONO EVENTO SINCRONO 


FIGURA Nº 05-002: Evento síncrono 


Características de Node.js 

” |  Open-source(código abierto) 

” | Miultiplataforma (se ejecuta en varias plataformas) 

” | Basado en el motor V8 de Google (Motor de JavaScript desarrollado por el 
Chromium Project para Google Chrome) 

Node.js no es: 

” | Lenguaje de programación 

”. Framework 

”  Libreria 

Instalación de Node.js 

El logo y página oficial de Node.js es tal como se muestra en la FIGURA Nº 05-003 y 

FIGURA Nº 05-004 respectivamente: 


S 


FIGURA Nº 05-003: Logo del Node.js 
https://nodejs.org/en 
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O Nociojs x ER 


€ 3 C à nodejsorg/en 


Node.js” es un entorno de tiempo de ejecución de JavaScript multiplataforma y de 
código abierto. 


a Windows (x64) 


18.16.1 LTS 20.3.1 Actual 


Recomendado uario Últimas funciones 


as | registro de cambios| Documentos API 


Para obtener informaciôn sobre las versiones admitidas, consulte el calendario de 


versiones . 


FIGURA Nº 05-004: Pagina web para descargar el instalador de Node.js 


En la FIGURA Nº 05-004 se puede ver la página oficial del Node.js en donde se tiene 
las dos últimas versiones: LTS (Long-Term- Support) y Actual, del cual hay que 


descargar la versión recomendada. 


Una vez descargado su instalación es sencilla, tal como se muestra en la en la FIGURA 


Nº 05-005. 


9 Nodejs Setup — x 


End-User License Agreement el 
Please read the following license agreement carefully A Ds e 


Node.js is licensed for use as follows: 
Copyright Node.js contributors. All rights reserved. 


Permission is hereby granted, free of charge, to any person obtaining 
a copy of this software and associated documentation files (the 


"Software", to deal in the Software without restriction, including 
without limitation the rights to use, copy, modify, merge, publish, 
distribute, sublicense, and/or sell copies of the Software, and to 
permit persons to whom the Software is furnished to do so, subject 


[7]I accept the terms in the License Agreement 


Print 


FIGURA Nº 05-005: Instalación del Node.js 
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Una vez terminada la instalación verificamos en la lista de programas FIGURA Nº 05- 


006: 


pe” NetBeans 


q Nitro Pro Offi 
pn? Node,js 


BM Install Additional Toois for Nodejs 


OD Nodejs Mic 


po, Node;s command prompt Explo 


O Node,js documentation 


O Node,js website 


1 Uninstall Node,js Mic 
A E Notas rápidas 


FIGURA Nº 05-006: Node.js 


Seleccionamos Node.js command prompt e interactuar con Node.js, se puede ver la 


versión digitando >node —version, FIGURA Nº 05-007. 


EM Node,js command prompt = 0 x 


FIGURA Nº 05-006: Node.js command prompt 
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REPOL (Read Eval Print Loop-El ciclo de leer evaluar y mostrar) de command 
prompt-node Node.js 


Para ver todo los comandos digitamos >node, luego > .help, FIGURA Nº 05-007 


EX Node,js command prompt - node = O 


Your environment has been set up for using Node.js 18.12.1 (x64) and npm. 


Ena pe a É 

Welcome to Node.js v18.12.1. 

Type "“.help” for more information. 

Raia nv 

.brea Sometimes you get 

Clear Alias for .break 

«editor Enter editor mode 

«exit Exit the REPL 

“help Print this help message 

. load Load JS from a file into the REPL session 
.Ssave Save all evaluated commands in this REPL session to a file 


FIGURA Nº 05-007: Commandos de command prompt-node 


Para editar código JavaScript digitamos >. editor, creamos la función sumar (a, b) y 
guardamos con ctrol+D luego se llama a la función sumar (15,16), FIGURA Nº 05-008. 


Nota: shift+enter para ingresar siguiente línea en el editor. 


ES Node,s command prompt - node 


Your environment has been set up for using Node.js 18.12.1 (x64) and npm. 


C: YsersiACER>node 


Welcome to Node.js v18.12.1. 
Type “.help” for more information. 
«help 
|| break Sometimes you get stuck, this gets you out 
«Clear Alias for .break 
Enter editor mode 
Exit the REPL 
Print this help mes 
Load JS from a file 
Save all evaluated commands in this REPL session to a file 


s Ctrl+C to abort current expression, Ctrl+D to exit the REPL 
«editor 


// Entering editor mode (Ctrl+D to finish, Ctrl+C to cancel) 
function sumar(a,b) (return a+b) 


sumar(15,16) 


FIGURA Nº 05-008: Probando código JavaScript con Node.js 
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Trabajando desde Visual Studio Code 

En el siguiente ejemplo creamos una función que genere números aleatorios enteros 
entre dos valores pasado como argumento a la función, luego se llama dentro de un for 
para generar varios números aleatorios. 


Para ello se crea el archivo app.js tal como se muestra en la FIGURA Nº 05-009 


File Edit Selection View Go Run Terminal Help app.js - INTRODUCCION NODEIS - Visual Studio € 


O EXPLORER ... JS appjs x 
» OPEN EDITORS Js app. geiRandorr 
X JS appjs getRandom(min,max)f 


 INTRODU ON NODEIS 
Cr Math.random() * (ma 
n=Math.round(n); 


return 


for( 1=0;1<10;i++)f 
onsole. log(getRandom(10,100)); 


FIGURA Nº 05-009: Archivo app.js y función que genera números aleatorios 


Para poder visualizar o ejecutar el código sin la necesidad de un navegador, con el 
terminal de Visual Studio Code (FIGURA Nº 05-010) con el comando >node app.js 
El resultado se muestra en la FIGURA Nº 05-011. 


File Edit Selection View Go Run Terminal | app.js - INTRODUCCION NODEIS - Vis 
JS aj New Terminal Ctrl+Shift+h 


»” OPEN EDITORS Js 
X JS J 
appJs Run Task... 
»” INTRODUCCION NODEIS 
Run Build Task... Ctrl+Shift+B 


JS appjs 


Run Active File 


Run Selected Text 


FIGURA Nº 05-010: Terminal de Visual Studio Code 
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andom 


getRandom(min,max)( 


n=Math.random() * (max - min) + min; 


n=Math.round(n); 


return n; 


t 
; 
for( 1=0;1<10;1++)( 


console. log(getRandom(10,100)); 


1 
J 


TERMINAL 


PS D:UNHEVALIPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBICAPITULO VIINTRODUCCION NODEJS> node app.js 


PS D:UNHEVALIPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBYCAPITULO VAINTRODUCCION NODEJS> | 


FIGURA Nº 05-011: Ejecutando JavaScript desde el terminal de Visual Studio Code 


Módulos en Node.Js 
Los módulos son una o más archivos en paquete, encapsulado con cierta funcionalidad 


en código JavaScript que puede ser reutilizada en una aplicación (FIGURA Nº 05- 
APLICACIÓN 
EN 
y 


MODULO 2 


FIGURA Nº 05-012: Módulos que se reutilizan en una aplicación JavaScript 


012). 
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Para utilizar un módulo en una aplicación JavaScript se importar con: 
require(nombre archivo). 
Así mismo se exporta un módulo que se puede crear en JavaScript con: 


module.exports.funcion exportar= funcion exportar 


Ejemplo de Modulo 

En el siguiente ejemplo se crea un archivo utilidades.js que contendrá varias funciones 
de utilidad y luego se exporta como modulo y se puede utilizar en otras aplicaciones 
JavaScript, en este caso se importa a app.js. 

Se crea tres funciones para exportar: 


utilidades.js 
function getRandom(min,max)( 
let n=Math.random() * (max - min) + min; 


n=Math.round(n); 


return n; 


function sumar(a,b)( 


return a+tb; 


function factorial (n)f 


Ver t=is 
for(let i=1;i<=n;i++)( 


f=rt; 


return f; 
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Se crea el archivo app.js en donde se importará el modulo y se utilizara las funciones que 


se requiera, en este caso getRandomoQ) dentro de un forapp,js 


1=6;1<16;1++)( 
console. log(utilidades.getRandom(18, 188)); 


y 
1 


Los resultados de ejecutar el app.js con node.js desde el terminal de Visual Studio Code 


se muestra en la FIGURA Nº 05-013. 


) File Edit selection View Go Run Terminal Help appjs - INTRODUCCION NODEIS - Visual Studio Code 


JS appjs Js 


const utilidades=require( 


ler 


(let i=0;i<10;i++)f 


console. log(utilidades.getRandom(10,100)); 


1 
3 


TERMINAL 


PS D: VUNHEVALIPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBNCAPITULO VIINTRODUCCION NODEIS> node app.js 


FIGURA Nº 05-013: Importando modulo con require a la aplicación app.js 
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Se podría importar solo algunas funciones del módulo para ello se haría con una sintaxis 


de desestructuración de la siguiente manera: 


(sumar, getRandomj=require( 


En ese caso solo se está importando de “./utilidades.js” las funciones sumar y 
getRandom. 
Para llamar a las funciones importados solo se utiliza las constantes definidad 


relacionados a cada uno de ellos. 


k=require( 


( 1=6;1<18;1++)( 


console. log(getRandomi(18,166)): 


1 
bi 


Algunos otros ejemplos para importar módulos: 


Y. Importar módulos del core const filesystems = require('fs”. 
”. Importar módulos de npm const express = require('express. 
Y Importar un archivo en un proyecto const server = require('./archivo.js”. 


Y. Importar un archivo JSON const configuracion = 


require('./config/db.json'). 
” Importa un index.js que se encuentra en un directorio sin tener que especificarlo 


const rutas = require('./rutas') 
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Exportando una clase 


class Alumno f 


constructor (codigo,nombre, apellido,) | 


this.codigo = ciodigo; 
this.nombre = nombre; 
this.apellido = apellido; 


) 
log (message) ( 


console. log(' [$(this.nombre)] $(message) ) 


info (message) ( 


this.log( info: $(message) ) 


Exportando una instancia: 
Módulo fs(File System) 


class 
(codigo,nombre, apellido,) 1 
this.codigo = ciodigo; 
this.nombre = nombre; 
= apellido; 
| 
log (message) 1 
console.log(” [g/this.nombre;] Simessage, 


1 
J 


timessage, 5 


verbose (message) | 


this.log( 


221 


Módulo de Systema de Archivos, que contiene funcionalidad para trabajar con el sistema 


de archivos y carpetas. Algunas operaciones: 
” Leer 
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”. Modificar 

”. Copiar 

” Eliminar 

” | Cambiar nombres 

Ejemplo de manejo de archivo 

En el siguiente ejemplo se tiene un archivo ftem.json, sobre el realizaremos algunas 
operaciones con el modulo fs. 


Leyendo el archivo ttem.json: 


=require ( 


.«readFile( 


(err) 


Se importa el módulo con require(“fs”, luego con el método fs.readFile se pasa el 
nombre del archivo y otros argumentos más. 

En el tercer argumento tenemos la función que tiene dos parâmetros: err, archivo, 

Si se produce algún error lo tendremos en “err” el cual se imprime en consola, si todo 
esta correcto el contenido del archivo ftem,json estará en archivo el cual es impreso en 


consola tal como se muestra en la FIGURA Nº 05-014. 
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File Edit Selection View Go Run Terminal app;js - INTRODUCCION NODEIS - Vi 


EXPLORER 
» OPEN EDITORS 
X JS appjs 
» INTRODUCCION NODEIS =require('fs'); 
JS appjs 
(3 itemjson 
JS utilidades,js .readFile('item.json', 'utf-8", 
if(err 


TERMINAL 


PS D: NUNHEVALNPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBICAPITULO VINTRODUCCION NODEJS> node app. js 


"5 ; 
“attributes”: ( 
“title”: “Rails is Omakase” 


CONTENIDO DE ARCHIVO 


FIGURA Nº 05-014: Leyendo archivo con el módulo fs 


El mensaje de error cuando es el mismo se muestra en la FIGURA Nº 05-015, para que 


ocurra ello vasca pasarlo como parámetro un archivo que no existe: 


15 appjs 


JS app;s 


=require('fs'); 


'itemi.json', 'utf-8', (err,a 


throw err; 


else 


MINAL powershe 


PS D: YUNHEVALÁPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBYCAPITULO VAINTRODUCCION NODEIJS> node app. js 
D: VUNHEVALÍPOYECTO DE LIBROS PARA PUBLICARLIBRO DESARROLLO DE SOLUCIONES WEBICAPITULO VAINTRODUCCION NODEJStapp.js:11 
throw err; 


a 


NOENT: no such file or directory, open 'D:NUNHEVALIPOYECTO DE LIBROS PARA PUBLICARÍLIBRO DESARROLLO DE SOLUCIONES WEBYCAPITULQ 


J 1 
errno: -4058, 
code: 
syscall: 
path: 


Node. js v18.12.1 


FIGURA Nº 05-015: Cuando ocurra un error se imprime el contenido de err 


Para modificar el nombre del archivo ttem.json a producto,json: fs.«rename() 
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=require('fs'd; 


.rename(“item. json','producto.json', (err,archivo) 


if(err) 
throw err; 
Jelse( 


console. log('Se modificó el nombre del archivo') 


Agregando contenido al final del archivo poducto.json: fs.appendFile0) 


=require('fs'); 


.appendFile ('producto.json','TEXTO AGREGADO", (err) 
if(err) 


throw err; 


telsel 


console. log('Se apgrego texto al archivo') 
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Remplazar todo el contenido del archivo poducto.json: fs.writeFile() 


=require('fs'); 


«writeFile('producto.json",'CONTENIDO NUEVO", (err)=>( 


if(err)( 
throw err; 


telse( 


Eliminando archivo poducto.json: fs.unlinkO 


=require('fs'); 


«unlink(*producto.json", (err)=>[ 
if(err)( 
throw err; 
telseí 
console. log('Archivo eliminado'3 


; 


Nota: Para trabajar de manera síncrono y que se ejecute las sentendias una de tras 


del otro conforme al orden programado, a cada método agregar “Sync”: fs.writeFile 


Sync() 


npm(Node Package Manager) 
Es el archivo de software más grande, que contiene paquetes (archivo o directorio 
descrito por un archivo package.json) que se puede instalar y usar en Node.js, 
permitiendo que cientos de desarrolladores lo puedan compartir entre distintos 
proyectos. Se compone de al menos dos partes principales. 
” Un repositorio online para publicar paquetes de software libre para ser 
utilizados en proyectos Node.js 
Y Una herramienta para la terminal (command line utility) para interactuar 
con dicho repositorio que te ayuda a la instalación de utilidades, manejo 


de dependencias y la publicación de paquetes 
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package.json 

Este archivo contiene la información del paquete incluyendo la descripción del mismo, 
versión, autor y dependencias. 

Es generado automáticamente mediante la ejecución de un script de npm: >npm init 
este script es ejecutado para inicializar un proyecto JavaScript. Se puede ver el contenido 
en la FIGURA Nº 05-016. 


index,js 


package,json 


FIGURA Nº 05-016: El archivo package.json 
package-lock.json 
Este archivo es auto generado por npm install y es una lista descriptiva y exacta de las 
versiones instaladas durante el proceso, en proceso de instalación se puede ver la 


pantalla tal momo se muestra en la FIGURA Nº 05-017. 


fves) v 
icontactos almas do json> 


] - idealTree: Completed in 4881ms 


FIGURA Nº 05-017: Progreso de instalación del Express 
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Parte del contenido de este archivo se puede visualizar en la FIGURA Nº 05-018. 


EXPLORER neo package-lockjson X 


» OPEN EDITORS 


FIGURA Nº 05-018: Parte del contenido del archivo package-lock.json 


52. Eprese > 


Es un framework backend que proporciona un conjunto de herramientas para 
aplicaciones web en Node.js, peticiones y respuestas HTTP, enrutamiento y middleware 
(sistema de software que ofrece funciones y servicios de nube comunes para las 
aplicaciones) para construir y desplegar aplicaciones a gran escala, disefiado para 


construir aplicaciones web de una sola página, multipágina e híbridas. 


Par utilizar en un proyecto se instala utilizando npm: >npm install express. 


Creando un servidor que escuche peticiones entrantes con 


Express 
Para ello una vez instalado Express, para una aplicación se importa con 
require('express”), tal como se muestra en el siguiente ejemplo. 


Se crea elarchivo app server.js, sobre ello ingresamos el siguiente código: 
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express = require( 


= express() 


= 4888 


.get( + (request, response) 


response. send( 


Para poner en marcha el servidor ejecutamos >node app server.js 


Se podría visualizar desde un navegador web ingresando en la barra de direcciones: 
localhost:8888, y tendremos la respuesta del servidor tal como se muestra en la FIGURA 


Nº 05-019. 


Q localhost8888 = + 


< > (5 local (ai PROMPTS ) PO NNE [4] 


E Servidor corriendo! 


FIGURA Nº 05-019: Servidor en marcha con Express 


Haciendo que el servidor responda el contenido de un arreglo a la solicitud: 
localhost:8888/listaAlumno, luego de configurar el servidor podemos ingresar el 


siguiente código: 
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“JOSE” ,apellido:"CHAVEZ CARDENAS”, 


“MARI A”, apellido:"COTRINA CHAVEZ” 


“2016235488” nombre: “JUAN ,apellido:"SANTILLAN CORNEJO” 


"2023654789" nombre: “ELMER",apellido:"CUBA SALDVAR” 


La respuesta del servidor a la petición localhost:8888/listaAlumnos se muestra 
como en la FIGURA Nº 05-020. 


& localhost4000/listaslumnos 


Dimensiones: Reactivo Y 817 86% Y Sin limitacones Y 


[["codigo”:"2015120128","“nombre”:"J0SE”,"“apellido”:"CHAVEZ CARDENAS"), 


("codigo”:"2015120999", “nombre” : “MARIA”, “apellido”:"COTRINA CHAVEZ", 
("codigo":"2018235488", “nombre”: "JUAN”,"“apellido”:"SANTILLAN CORNEJO”?, 
t"codigo":"2023654789", “nombre”: “"ELMER”,“apellido”:"“CHUQUIYAURI SALDVAR”"*, 
(t"codigo”:"2023654824”, “nombre”: “MARCOS”, "“apellido”:"“CORDOVA GARCIA"J] 


FIGURA Nº 05-020: Respuesta del servidor en formato JSON 
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5.3. Motor de plomtila EIS — 


Un motor de plantilla es texto que es procesado y convertido en html. 


El EJS es un motor de plantilla que permite generar HTML e insertar código JavaScript 


del lado del cliente. Una representación de lo que es Node.js, Express.js y EJS se muestra 


en la FIGURA Nº 05-021. 


OS) -  Expressjs 


FIGURA Nº 05-021: Rol del EJS 


Para utilizar se instala la dependencia con >npm install ejs 


Cuando se requiere hacer uso del EJS, los archivos se crean con extensión .ejs a cambio 
de html. 
La documentación del EJS se puede revisar en la página (FIGURA Nº 05-022 y 
FIGURA Nº 05-023): https: //ejs.co/ 

95 EJS--Embedded lave x | [H] Servidorcon Node + | x | (9) Usodemotoresdete x | + 


€e 5 co 8 ejs.co SS & E 


O Aulavirtual servir (E) ChatGPT 


JGKE 


The original JavaScript build tool 


Embedded JavaScript templating. 


GET STARTED 


FIGURA Nº 05-022: Pagina de la documentación de EJS 
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Features Get Started 


Get Started 


Install 
It's easy to install EJS with NPM. 


$ npm install ejs 


Use 


Pass EJS a template string and some data. BOOM, you've got some HTML. 


ejs = require( je 
people = [ - 
html = ejs.render( » tpeople: people)); 


CLI 


Feed it a template file and a data file, and specify an output file. 


ejs -/template file.ejs -f data file.json -o ./output.html 


FIGURA Nº 05-023: Pagina de la documentación de EJS 


En el siguiente ejemplo se creará una carpeta views, luego se crea el archivo index.ejs 


index.ejs 


Iniciando com EIS 


CAPÍTULO V: Desarrollo de soluciones backend con Node.JS y Express | 232 


Luego se Ilama desde el archivo del servidor: 


app. get( +» function (request, response) ( 
Pp d 


response.render( BE 


Enviando parámetros a un template(.ejs) en Express 


Desde la ruta en «render como segundo parámetro enviamos datos: 


app. get( ,s function (request, response) ( 
response.render ( sl 
DNI: request .params.DNI, 
nombre:request.params.nombre, 


Se crea el archivo indexAlumno.ejs para recepcionar los parâmetros de: DNI, 


nombre para llamarlo desde la url: 


Recibiendo parámetros en el archivo indexAlumno.ejs y pasando como variable en el 


HTML con <%= variable %> para que se visualice: indexAlumno.ejs 


html 
head 
link rel= 
head 
body 
hi>El DNI del alummo es:<%= DNI &></h1 


p>El NOMBRE del alumno es: <%= nombre &></p 
body 
html 


Para visualizar desde la barra de direcciones de un navegador: 


Se puede visualizar el resultado como en la FIGURA Nº 05-024 
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O localhost 4000/matricula/? X + 


« C Es & localhost 4000/matricula/22451077/ELMER%20CHUQUIYAURI 


Dimensiones: Reactivo Y 817 571 86% Y Sin limitacdones Y 


El DNI del alumno es:22451077 


EINOMBRE del alumno es-ELMER CHUQUIYAURI 


FIGURA Nº 05-024: Pasando parámetros a una plantilla ejs 


EJEMPLO DE APLICACIÓN Nº001 
Desarrollar un aplicativo para gestionar usuarios (crear nuevos, modificar, eliminar, 
listar). El almacenamiento de los datos se hacerlo en un archivo data.json 
Para el aplicativo crear el disefo mostrado en la FIGURA Nº 05-025 


Apellidos y Nombres Telefono Cuente Password 


» | CHUQUIYAURI SALDIVAR, 


ELMER ELMERQHOTMAIL.COM | 970988938 | ELMER 123456 


py | SANTILLAN GARCIA, 


MARIA MARIA QGMAIL.COM 9854785 MARIA 23547 


” | GARCIA MATOS, JUAN JUANGGMAIL COM 95684658 | aca con 125478 


NUEVO 


FIGURA Nº 05-025: Disefão de formulario para gestionar usuarios 


DESARROLLO 
Para el desarrollo del siguiente aplicativo se utiliza todo lo descrito anteriormente: 
” Node.js 
” Express 
” EJS 
Se crea el archivo gestion usuario y se abre en el Visual Studio Code para instalar 


las dependencias que se requiere y se crea las carpetas y archivos necesarios: 
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1. Iniciando la creación del Proyecto >node init 
2. Instalando Express >npm i express 
3. Instalando EJS >npmiejs 


Se crealas carpetas y los archivos necesarios: css, src, views y server (para programar 
del lado del servidor), la carpeta node modules y .uscode se crean automáticamente 
cuando se instalan las dependencias, tal como se muestra en la FIGURA Nº 05-026. 


File Ed Selection View Terminal Help 
EXPLORER 
OPEN EDITORS 
” GESTION USUARIOS 
> -vscode 
“= €ss 


login style.css 


style.css 


> node modules 
“ server 
JS app server.js 
ft) datajson 
= SEC 
JS indexUser.js 
= views 
<> indexUser.ejs 
<> login.ejs 
tj package-lock.json 


tj package.json 


FIGURA Nº 05-026: Carpetas para el aplicativo 
Disefio de la interfaz (archivo indexUser.ejs): 
Para el disefio de la interfaz en la carpeta views se crea el archivo indexUser.ejs y se 
agrega las etiquetas HTLM necesarias; dentro de <body> se agrega <main> y dentro 
de <main> se agregan dos etiquetas <section>, uno como contenedor de la parte 1 que 
contendrá también un formulario <form> con todas las etiquetas que se requiere según 
el prototipo y otro para la parte 2 que contendrá una tabla <table>, como se ve en la 
FIGURA Nº 05-027. 


USUARIOS Telefogo 


Telefone 1 


FIGURA Nº 05-027: Prototipo del aplicativo 
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Etiquetas del <head>: 
Etiqueta href 
href="https: //fonts.googleapis.com/css2?family=Material+ 
<link> Symbols+Outlined:opsz,wght, FILLGRADO20..48,100..700,0..1,-50..200" 
Google Fonts: fuentes e iconos de google 
href="style.css" 
<link> Estilos de la aplicación 
Etiquetas del <body>: 
Etiquet |type |id clas | name texto 
a s 
<main> 
<section formContainer 
> 
<h1> USUARIO 
S 
<form> formulario 
<Input> | hidde | txtId id 
n 
<label> Apellidos y 
Nombres 
<input> | text txtApellido apellido nomb | Apellido 
re 
<label> Correo 
<input> | text txtCorreo correo Correo 
<label> Telefono 
<input> | text txtTelefono telefono Telefono 
<label> Cuenta 
<input> | text txtCuenta cuenta cuenta 
<label> Passwor 
<input> | text txtPasswor password password 
btnOperacion NUEVO 
<button> | data-operacion="C" 
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<button> btnCancelar CANCELA 
R 
<form> formularioHidden 
<input> | hidde |id txt formularioHid id 
n den 
<section tableContainer 
> 
<table> 
<thead> 
<tr> 
<th> E 
<th> M 
<th> Apellidos y 
Nombres 
<th> Correo 
<th> Telefono 
<th> Cuente 
<th> Password 
<tbody> | CONTENDRA LAS FILAS QUE SE GENERARA 
DINAMICAMENTE 
<script> | src="indexUser.js” 
Script que tiene la lógica para interactuar con aplicativo 
<script> | src="https://cdn.jsdelivr.net/npm/sweetalerto(011" 


<!-- PARA LAS VENTANAS DE MENSAJE--> 
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Contenido del archivo indexUser.ejs: 


DOCTYPE html 


html lang="er 


charset="UTF-8' 


1 http-equiv="X-UA-Com content="TE- 


a name=" viewpol content="width=der -WIC 
link rel="stylesheet" href="h 
link rel="stylesheet” href=": 
title>Document</title 
head 
body 
[ERRA 


section id="formí 
hi>USUARIOS</hi 
form Id= OrmuLario 
put type= den” id="txtId” name= 
for="">Apellidos y Nombres</label 
- type="tex 1d='txtâpe lo” name="a lido nombre” placeholder="A lo” disabled 
for="">Correo</label 
- type='"tex id="txtCorreo name='"co »” placeholder="Correo” disabled 
for="">Telefono 
t type="text” id="txtTelefono” name=" fono” placeholder="T no” disabled 
for="">Cuenta 


type="text” id='"txtCuenta name="cuenta” placeholder="ci disabled 
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input type='"tex 1 X HO name= SSWOI disabled 
button id="btnÔ) data-operacion= NUEVO</buttom 
button id="btnCancela CANCELAR</button 

trorm 


qo ni Leqeals qo alof=dar 
input type="hidde = x rmularioHidd: name= 


form 


th>E</th 
1>M</th 
mApellidos y Nombres 
Correo</th 
1>Telefono 
Cuente</th 


|»>Password 
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o” 


<% data. forEach(function(user)(%> 


class="material-symbols-outlined” data 
lass="material-symbols-outlined”" data-id="<% 
.apellido nombre %> 
«correo &> 
telefono %> 
cuenta %> 


«password %> 


src= 'indexser.js' 


src="https://cdn.jsdelivr.net/npm/sweetalert2a11" 


Contenido del archivo style.css: para dar estilos al HTML 


padding: B; 


margin: 8; 


box-sizing: border-box; 


body 


background -color: 


mainf 
display: grid; 
grid-template-columns: 1fr 


gap: 10px; 
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Il 
padding: 26px; 


width: 95%; 

max-width: 188%; 

margin: E 

margin-top: 5px; 

padding: 5px; 

box-shadow: B 6 26px 1px rgba(8, 8, 6, 8.3); 
position: E 


r hit 
text-align: E 
margin-bottom: 28px; 


display: E 
flex-direction: 
gap: 5px; 
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padding: 18px; 
border-radius: 18px; 
border: 2px reb(212,212,212): 


margin-top: 1Bpx; 

padding: 18px; 

border-radius: 18px; 

border: F 

border :2px reb(11, 15, 248); 
background -color: E 

color: : 


cursor: - 
transform: scale(8.95); 
background-color: rgb(7?, 
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fFtableContainer( 
background -color white; 


width: 95%: 

max-width: 188%; 

margin: auto; 

margin-top: 5px; 

padding: 5px; 

box-shadow: & 8 26px 1px rgba(8, 68, &, 8.3); 
position: relative; 


overflow: auto; 
height: 580px; 
; 
table,td,th,tr( 
border :1px solid black; 
border-collapse: collapse; 
; 
table( 


width: 188%: 


background -color: 


color: white; 


padding: 18px; 


padding: 10px; 


table span:hover( 
cursor: pointer; 


table tr:hover( 


cursor: pointer; 


background -color: 
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(media only screen and (max-width: 660px) and (min-width: 488px) ( 


mainf 


grid-template-columns: 


(media only screen and (max-width: 1206px) and (min-width: 680px) ( 


mainf 


grid-template-columns: 
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Programación del lado del cliente (Frontend) 

Para interactuar con el aplicativo desde el lado del cliente se crea dentro de la carpeta scr el 
archivo indexUser.,js, que contendrá la logia de la interacción. 

En el formulario inicialmente se tiene todos los inputs deshabilitado, en el botón 
“btnOperacion” inicialmente con etiqueta “NUEVO” al hacer click habilita todos los 
inputs(.disabled=false) y cambia su etiqueta a “GRABAR*( 
e.target.textContent="GRABAR?), siempre en cuando el valor del .dataset.operacion 
sea “C” que indica que es un nuevo usuario, este mismo botón permitirá modificar datos, para 
lo cual se cambia el valor de .dataset.operacion a “M” y su etiqueta a “MODIFICAR” 
(btnOperacion.textContent="MODIFICAR") desde el icono de edit de un registro de la 
tabla(que a su vez captura todo los valores del registro y se asigna a los inputs del formulario), 
luego cuando se hace click en el botón “btnOperacion” con etiqueta “MODIFICAR” se 
cambia a “GRABAR”( e.target.textContent="GRABAR”. 

Para ambos casos (creando un nuevo usuario o modificando datos de un usuario) cuando el 
botón “btnOperacion” tiene como etiqueta “GRABAR?”, al hacer click se envia al servidor 
los datos del formulario, para ello se asigna el método de envió a “post( 
formulario.method= "post, la ruta de envió a 
“newUser"(formulario.action="newUser"”, y se lama a submitO 
(formulario.submitO), así mismo forzamos un click al botón | “btnCancelar” 
(btnCancelar.onclick(e)) para limpiar los inputs del formulario así como se muestra en la 
FIGURA Nº 05-028. 


FIGURA Nº 05-028: Parte de código de envió de datos al servidor 
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Contenido completo del archivo indexUser.js: 


=document. querySelector( body"); 


=document. getElementById('formulario"): 
cument . querySelector("&txtId"3: 
=document . querySelector("ftxtApellido"3; 
=document. querySelector("&ftxtCorreo'): 
=document . querySelector("&txtTelefono"3; 
=document. querySelector("&txtCuenta"3; 


=document. querySelector("fFtxtPasswor'"): 


=document . querySelector ("ftableContainer” 


=document . querySelector(" &btnOperacion"); 


=document . querySelector('&btnCancelar"3; 


=document . getElementById('formularioHidden"); 


=document. getElementById('id txt formularioHidden"); 
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«onclick=(e)=>( 
e. preventDefault(); 


+. operacion==="C") 


if(e.target.textContent==="NUEVO"3 
( 


«method="post” 

.action='newlser” 

.submit(): 
«onclick(e): 


else( 
if(e.target.textContent==="MODIFICAR'3( 


«disabled= 
.«disabled= 

jisabled= E 
textContent="GRABAR'; 


-method="post” 


.action="newlser” 
.submit(): 
«onclick(e); 
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«onclick=(e)=>[ 
e.preventDefault (); 


vaqlge=. 
«value="": 
.«disabled= 
SUE pu 
«disabled= 


.«value="" 


.«textContent="NUEVO"; 


.dataset.operacion="C"; 
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«onclick=(e)=>[ 


if(e.target.textContent==="delete") 
( 


Swal.fire(( 
title: “Eliminar registro de todas maneras?', 
text: “Se borraran los datos definitivamente de la BD”, 
Icon: “warning', 
showlancelButton: 
confirmButtonltolor: '&3€ 
cancelButtonlolor: “fd ; 
confirmButtonText: "Sã, Borrar! 
)) .then((result) ( 
1f (result.isConfirmed) ( 
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Swal.fire( 
'Se borro', 
“los datos correctamente.', 


SUCCESS 


.value=e.target.dataset.id; 
-method= post” 
.action='deletelser” 


-submit(): 


CAPÍTULO V: Desarrollo de soluciones backend con Node.JS y Express 


nodo=nodo. nextElementSibling; 


. va lue=nodo. textContent; 


nodo=nodo. nextElementSibling; 


.value=nodo. textContent; 


nodo.nextElementSibling; 


.value=nodo. textContent; 


nodo=nodo. nextElementSabling; 


os 


.value=nodo.textContent; 


nodo=nodo. nextElementSibling; 


.value=nodo. textContent; 
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de 


btnôperacion.textContent="MODIFICAR"; 


jara indicar que es una modificaci 


btnôperacion.dataset.operacion="M 
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Programación desde el lado del servidor (Backend) 

Con Node.js y Express instalado, se programa el servidor para atender todos los pedidos del 
cliente así mismo gestionar el almacenamiento de los usuarios (almacenar nuevos usuarios, 
modificar, eliminar, generar reportes, entre otros); por lo que se crea el archivo 
app server.js dentro de la carpeta server, en lo que se programara la configuración del 
servidor, así mismo la gestión de usuarios (crear, modificar, eliminar y listar). 

Para hacer persistente los datos se crea el archivo dentro de la carpeta server: data.json que 
permitirá gestionar usuarios en formato JSON. 

Se crea la const express y se requiere el módulo o dependencia express (const express = 
require('express”), de igual forma se crea la constante app y se Ilama al módulo express(), 
se crea la constante PORT el cual será la variable de entorno process.env.PORT la que lo 
asigne, si no encuentra la variable de entorno entonces asigne el puerto 4000. Es recomendable 
dejar que sea la variable de entorno la que asigne el puerto. 

Se levanta el servidor con express, para ello se utiliza el comando. 

app.listen(PORT, (req, res) => f console.log( Url de prueba: http://localhost: 
$1PORT) )); Este comando le dirá al servidor que escuche el puerto y reciba una respuesta. 
Si es correcta indicará en la terminal el mensaje “Url de prueba: http://localhost:4000” 
y con los template literal (* *) se lama a la variable $(PORT>. 

Para el motor de plantillas se crea la const ejs y se requiere el módulo o dependencia “ejs” 
(const ejs = require('ejs”). 


Para la gestión del archivo utilizamos el modulo “fs”. 
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Contenido completo del archivo server/app server.js: 


express = require(' 


bodyParser = require(' 


lamtilla EIS 
require('ejs') 


= express() 


constante PORT | RI dg ici 
: 1 QU d5lLell 
ena el puerto ABB 


PORT | | 4998 
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«set('views','./views') 
.set(' view engine", 'ejs') 


.urlencoded(( extended: 


.use(express. 
.use(express.s 
.use(express.s 


.get('/', (request, response) 


response.render( login"); 
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.get('/listallsuarios", (request, response) 


=require('fs'); 


.readFile('./server/data.json','utf-8', (err,archivo) 

if(err)( 

console. log(err); 
; 
elseí 

data=[] 
if(archivo. >8) 
data= . values (ISON. parse(archivo)); 


response .render(“indexUser", (data)); 
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llido nombre=apellido nombre; 
.correo=correo; 
.telefono=telefono; 
.cuenta=cuenta; 


- Password=passwora; 


console. log(reqg.body.apellido nombre) 

if(reg.body.id.length>8) 
id=req.body.id; 

elseí 


id=generar IdUnico(); 
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/ 


( id,reg.body.apellido nombre, 
reg.body.correo, reg.body.telefono, 


reg.body. cuenta, reg.body.password) 


=require('fs'); 


.readFile('./server/data.json','utf-8', (err, archivo) 
if(err)( 
console. log(err); 
telse( 
usuarios=( 


if(archivo. 


=)JSON. stringify (usuarios); 


writeFile('./server/data.json', 
if(err)( 
throw err; 
Felse( 
console. log('SE ADICIONO....') 


.values(usuarios); 


es. render (“indexUser", (data)); 


.post('/deletelser', (req, res) 
id=req.body.1d; 
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=require('fs'); 


.readFile('./server/data. json','utf-8', (err,archivo)=>[ 
if(err)( 
console. log(err); 


telse( 


usuarios=( + 
ha 


if(archivo. >8) 
usuarios=ISON.parse(archivo) 


usuarios [id]; 


=ISON.stringify(usuarios); 


«writeFile('./server/data.json', 
if(err) 
throw err; 
telse( 
console. log('SE ELIMINO....') 


CAPÍTULO V: Desarrollo de soluciones backend con Node.JS y Express | 263 


var data=[] 
data=0Object.values(usuarios); 
res.render ( s(idata)); 


app.listen(PORT, () => [ 
console. log( $ (PORT) ) 


generaridUnico = () => [ 
return Math.random() .toString(38).substring(2): 


Para poner en marcha el aplicativo, desde el terminal de Visual Studio Code ingresar ...>node server/app server.js 
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Luego se prueba desde un navegador web: localhost:4000/ 


Tendremos la pantalla mostrado en la FIGURA Nº 05-029 


O Aula virtual servir ChatGPT 


FIGURA Nº 05-029: Pantalla de inicio del aplicativo de gestión de usuarios 


Click en el link y tendremos la pantalla mostrada en la FIGURA Nº 05-030 
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€ 53 C O localhost4000/listaUsuarios qe Yo 2 : 
[S) Aula virtual servir Gg ChatGPT 
Apellidos y Nombres Correo Telefono Cuente Password 


CHUQUIYAURI SALDVAR, ELMER SANTIAGO elmer(d gmail.com 970988938 ELMER 


JOSE 


HUAMAN SOBRADO. DIANA 9754851 ELMER 


HUAMAN SOBRADO. NILVER diana Q smil.com 970988938 ELMER 123546 


CANCELAR 


FIGURA Nº 05-030: Pantalla principal del aplicativo de gestión de usuarios 
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5.4. Conexión a MySQL 


Para la conexión con MySQL se instala el modulo “mysql” >npm install mysql 
Luego del lado del servidor se configura los parámetros de conexión a la base de datos y 


se realiza la conexión, así como se muestra en el siguiente ejemplo: 


importa e nanuete TES 


mysql=require('mysql'3; 


const conector=mysgl.createConnection( 
f 
host: 'lo 
user: 'root', 
password: '", 
database: 'b 


sort:3388 


const conexion=()=>[ 
conector. connect(err=>»[ 
(err) err 


console. log(' conectado 


Luego de realizar la conexión se puede realizar operaciones de: INSERT, UPDATE, 
DELETE O SELECT a una o más tablas de la base de datos. Para ello se utiliza el método: 
query(“cadSQL”, function(err,result,field)f )), pasando como el primer 
parámetro cualquier sentencias de SQL visto en el capítulo IV(INSERT, UPDATE, 
DELETE O SELECT). 

Nota. En los parámetros de conexión cuando no se asigna explicitamente un puerto 
para MySQL lo toma por defecto 3306, pero si eso es diferente hay que asignar 


explícitamente dicho valor al parámetro “port:valor”, por ejemplo: port:3308 
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EJEMPLO DE APLICACIÓN Nº002 
Desarrollar un aplicativo con el mismo disefio del EJEMPLO DE APLICACIÓN 
Nº001 para gestionar usuarios (crear nuevos, modificar, eliminar, listar). En este caso 
el almacenamiento de los datos se realiza en una base de datos bd usuario. 
Para el aplicativo, la primera pantalla deberá ser el logeo de usuario tal como se muestra 
el disefio en la FIGURA Nº 05-031. Cuando un usuario y password es correcto se muestra 


la pantalla como en la FIGURA Nº 05-032. 


ACCESO AL SISTEMA 


Password 


FIGURA Nº 05-031: Pantalla de logeo al aplicativo 
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NUEVO 


CANCELAR 


» | CHUQUIYAURI SALDIVAR, 


Apellidos y Nombres 


ELMER 


ELMERQHOTMAIL.COM 


Telefono 


970988938 


Cuente 


ELMER 
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Password 


py | SANTILLAN GARCIA, 


MARIA 


MARIA QGMAIL.COM 


9854785 


MARIA 


” | GARCIA MATOS, JUAN 


JUANQGMAIL.COM 


95684658 


JUANQGMAIL.COM 


FIGURA Nº 05-032: Disefio de formulario para gestionar usuarios con una base de 


datos 


DESARROLLO 


Programación del lado del cliente(Frontend) 


Para el desarrollo se utiliza los módulos, dependencias, componentes, carpetas y archivos 
del aplicativo desarrollado en el EJEMPLO DE APLICACIÓN Nº001. Adicional a ello 
instalamos el módulo mysql >npm istall mysql. 
La programación de la lógica de interacción del lado del cliente(Frontend) de la FIGURA 
Nº 05-032 es lo mismo que del EJEMPLO DE APLICACIÓN Nº001. 


El disefio y la programación de la lógica de interacción para el logeo tal como se muestra 


en la FIGURA Nº 05-031, se describe a continuación: 


Etiquetas del <head>: 


Etiqueta href 
href="style login.css" 
<link> Estilos de la ventana de logeo 
Etiquetas del <body>: 
Etiqueta | type id class name texto 
<form> form-login 
action="login" method="post" 

<h1> form-titulo Acceso al 
Sistema 

<input> | text txtUsuario txtUsuario | Usuario 

<input> | password | txtPassword txtPassword | Password 

<button> | submit LOGIN 
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Se crea el archivo login.ejs dentro de la carpeta views, el contenido completo del dicho archivo se muestra a continuación: 


login.ejs 


DOCTYPE html 
html lang= 
head 
meta charset= 
meta http-equiv= content= 
link rel= 
title>Login</title 
head 
body 
form id= 1 method= 
hi class= o al Sistema</h1 


input type= affaf= placeholder= 
input type= name= ae E placeholder= 
button type= LOGIN</button 

form 


body 
html 


Como se tiene el formulario y el botón submit que al hacer click se enviará dos datos del formulario a la ruta “login”, que será creado y programado del 


lado del servidor. 
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Para aplicar estilo al HTML del login.ejs se crea el archivo “style login.css” dentro 


de la carpeta “css”, tal como se muestra a continuación: 


html, body( 


188%; 


body 
margin: B; 
padding: 68; 


background-color: rgb(255, 238, 6); 


display :flex; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: center; 
align-items: center; 


fform-logint 
width: 325px; 
height: 480px; 
background-color: regb(204, 281, 43); 
border-radius: 2€ 


nargin-top: 
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-form-titulo( 
color: FB88; 
text-transform: uppercase; 
fomt-welght: 588; 
t-size: 25px; 


ckeround: none; 


> 


splay: block; 


margin-top: 5Bpx; 


margin: 20px auto; 


o 


adding: 14px 10px; 


center; 


fform-login input [type="password"], 
fform-login button[type="submit"]( 
border: 8; 
background: none; 
display: block; 


margin: 20px auto; 


padding: 14px 18px; 


text-align: center; 
border: 2px solid Frfff; 


width: 280px; 
outline: none; 

color :Hfff; 
border-radius: 24px; 


transition: 8.25s; 
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Hform-login input[type="text"]: focus, 


“ 


Hform-login input [type=" ]:focusf 
width: 270px;/* 


border-color: 


| 


&form-login button[type="submi 


border: 0; /*si 
background: 


cursor: 
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Desde el lado del servidor se utiliza todo lo programado en el EJEMPLO DE 


APLICACIÓN Nº001, solo que, los datos ya no se almacenarán en un archivo sino en 


una base de datos, en este caso “bd usuario”, para lo cual instalamos el Mysql a través 


del XAMPP tal como se detalló en el capítulo IV, luego con el phpMyAdmin se crea la 


base de datos y la tabla usuario, así como se muestra en la 
FIGURA Nº 05-033. 


Script de creación de base de datos: 
CREATE DATABASE bd usuario 
Script de creación de la tabla usuario 
CREATE TABLE “usuario ( 

“id” varchar(50) NOT NULL, 

“apellido nombre” varchar(80) NOT NULL, 


“correo” varchar(50) NOT NULL, 
“telefono” varchar(30) NOT NULL, 
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“cuenta” varchar(30) NOT NULL, 
“password varchar(30) NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latini COLLATE=latini swedish ci; 


phpMyAdmin ET Servidor: 127.001 » (8 Base de datos: bd usuario » EE T 
QUO ge ] Examinar 4 Estructura [] soL 4 Buscar 
ágio Abe J* Estructura de tabla &B Vista de relaciones 
so 
— & Nueva a * Nombre Tipo Cotejamiento A 
=— + bd usuario 
Es NE = 1 id varchar(50) latinf swedish ci 
= 
=l Columnas () 2 apellido nombre varchar(80) latinf swedish ci 
E, Nueva = 
Lg llid E nar) U) 3 correo varchar(50) latinf swedish ci 
apellido nombre (varchar 
-—I correo (varchar) E , , , 
Lg ara [) 4 telefono varchar(30) latinf swedish ci 
cuenta (varchar 
id (varchar' ses 
E É ) [) 5 cuenta varchar(30) latinf swedish ci 
password (varchar) 
r 
E Cree 6 password varchar(30) latinf swedish ci 


FIGURA Nº 05-033: Estructura de la base de datos “bd usuario” y la tabla 


“usuario” 


En el archivo app. server.js del EJEMPLO DE APLICACIÓN Nº001, se agrega 
código y se hace algunos cambios en las mismas rutas para realizar operaciones con la 
base de datos (INSERT, UPDATE, DELETE O SELECT), así mismo se crea el archivo 
db mysql.js dentro de la carpeta server, donde se tendrá la programación de la lógica 
de conexión y operaciones con la base de datos, los cuales se exporta como modulo para 


utilizarlos desde el archivo app serve.js 


Contenido del archivo db mysql.js 


const conector=mysql.createConnection( 


í 


host: 'lo 

user: “root, 
password: '", 
database: 'bd 


st conexion=()=>[ 
conector. connect(err=>( 
(err) 1 err 


console. log(': 
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db mysql.js 


274 


CAPÍTULO V: Desarrollo de soluciones backend con Node.JS y Express 


addUsuario=(data)=>( 


“INSERT INTO usuario(id,apellido nombre, correo, telefono, cuenta, password) 


“VALUES('g(data.idy','g(data.apellido nombre)','g(data.correo)', 


data. telefono data. cuenta data. passwordy'5 


«query( , (err,result, filed)f 
if(err) throw err; 


console. log(result); 


updateUsuario=(data)=>( 
console. log(data) 


= UPDATE usuario set apellido nombre='$(data.apellido nombre;j',correo=" 


+ bg(data.correo;' ,telefono='$(data. telefono;'.cuenta='g(data.cuenta 
+ 


“spassword='g(data.password;' WHERE id='g(data.id 
«query( ; (err,result, filed)( 
if(err) throw err; 


console. log(result): 
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deleteUsuario=(id)=> 


=' DELETE FROM usuario WHERE id=' 


query r 
if(err) throw err; 
nsole.log(result); 


ole. log("se elimino") 


getUsuarios=(reg,res)=>[ 


='SELECT *FROM usuario" 
«query( , (err,result, filed)=>( 
if(err)f 

res. json(err); 


a 
J 
data=result; 


res .render ('indexUser', (datal); 
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.Conexion=conexion; 
. addUsuario=addUsuario; 


-UpdateUsuario=updateUsuario; 


.getUsuarios=getlUsuarios; 


.deletelUsuario=deleteUsuario; 


Contenido del archivo app server.js 


express = require('express') 


=require('./db mysql.js'); 


= require('body-parser'3 


require('ejs') 


express() 
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.use(bodyParser .urlencoded(( extended: false ))) 


.use(express. static( 
.use(express. static( 


.use(express. static( 


.get( +» (reg, res) 


res.render ( HE 
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.post('/login', (reg,res)=>( 


ifí(reg.body.txtUsuario==="admin')j&&(req.body.txtPassword===" 


l 


1 
H 
else( 
console. log( “clave o password incorrecto"): 


res.render("login'); 


.get("/listalsuarios", (reg, res) 


mysql.getUsuarios(reg,res); 
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«post('/newlser', (reg, res) 


mysql .updateUsuario( JE 


mysql.getUsuarios(reg,res); 
” o , 


id=generarIdUnico(); 
«alçe pesi(a!E 
mysql.addUsuario( » 


mysql.getUsuarios(reg,res); 
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.post('/deletelser'", (reg, res) 
id=req.body.1d; 
mysql.deleteUsuario(id); 


mysql.getUsuarios(reg,res); 
> q [me] U 


«listen( Bo [ 


console.log( Url de prueba: http://localhost: 


generaridUnico = () E 


return Math. random() .toString (38). substring(2); 


o 
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En la ruta “login” se recepciona los datos del usuario y su password para comparar con “admin” y “123”, el cual en otra versión del aplicativo 


se verificará con las cuentas de los usuarios registrado en la base de datos, FIGURA Nº 05-034 


6 J5 app servers server 
 GESTION USUARIOS MYSQL a for da res) 
> .vscode res .render("login"); 
css 
style login.css 
style.css 
> modelo 
> node modules .post('/login', (reqg,res)=>1 


” server 


Js app servers , reg. body .txtUsuario=== dy. txtPassword==="123") 


JS db mysaljs 

» SIC 

“ views 

<> indexUser.ejs 

<> login.ejs console. log("clave o password incorrecto"); 
(3 package-lock.json res.render("login"); 

(3 package,json 


FIGURA Nº 05-034: Archivos adicionados y creación de la ruta de login desde el lado del servidor 
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Cuando ponemos en marcha el servidor del aplicativo >node server/app server.js y desde la barra de direcciones de un navegador 


ingresamos: localhost:4000, tendremos la pantalla de la FIGURA Nº 05-035 


ACCESO AL SISTEMA 


JSuUaro 


FIGURA Nº 05-035: Pantalla de logeo 
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Se ingresa en usuario: admin y en password: 123, se tendrá la pantalla tal como se muestra en la FIGURA Nº 05-036 


E Apellidos y Nombres ; Telefono Cuente Password 


Ú a SANTILLAN CORNEJO. JOSE jose(Dhotmail.com 970988938 | jose 7896547 


HUAMAN SOBRADO. DIANA ECRM ca = 

7065485 
MARIA diana(& gmil.com 97065485 
CHUQUIYAURI SADLVIAR, 


23(a Í 54755 tan: 2345 
ELMER elmer23(Mgmail.com | 98547554 | diana 123456 


CANCELAR 


FIGURA Nº 05-036: Pantalla principal de gestión de usuario 


Caso Práctico 
(Empresa de Turismo 
PATA AMARILLA) 
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Empresa de Turismo “Pata 
Amarilla” 
1. Introducción 


La creación del sistema digital para una empresa que lo llamamos, la empresa de turismo 
"Pata Amarilla", para la región de Huánuco, consiste para automatizar a varias áreas y 
evitar problemas de aglomeración y las colas donde las personas esperan por muchas 
horas para ser atendidos y muchas veces no reciben una atención adecuada como ellos 
desean lo que ha generado la necesidad de mejorar sus procesos internos para 
mantenerse competitiva en el mercado. En respuesta a este desafio, para esta empresa 
se ha implementado un sistema innovador para la gestión de bienes y suministros. Este 
sistema está disefado para abordar las ineficiencias operativas y mejorar la 
transparencia en la administración de recursos, áreas que son cruciales para el éxito de 


cualquier empresa moderna. 


El objetivo principal de este sistema es aumentar la eficiencia operativa al automatizar 
procesos porque muchas veces las personas de manera manual no tienen una atención 
adecuada y las empresas por esta razón no tienen muchos usuarios. La gestión manual 
de bienes y suministros puede ser propensa a errores, demoras y una falta de control 
riguroso sobre los inventarios. Al implementar un sistema automatizado, "Pata Amarilla" 
puede reducir estos problemas, asegurando que los recursos se gestionen de manera más 
precisa y efectiva. Además, la transparencia en la administración de recursos permite a 


la empresa tomar decisiones informadas basadas en datos actualizados y precisos. 


Por otra parte, también se detallarán las funcionalidades del sistema implementado, 
proporcionando una visión clara de cómo cada área de la empresa interactúa con el 
sistema para asegurar un flujo de trabajo óptimo. Se describirán las áreas involucradas, 
tales como Usuario, Administración, Proveedor, Logística y Almacén, y cómo estas áreas 
están interconectadas para garantizar que los procesos se realicen de manera coordinada 
y eficiente. Esta interacción entre las áreas es esencial para el funcionamiento integral 


del sistema y para la consecución de los objetivos empresariales. 
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La implementación de este sistema busca no solo optimizar los procesos internos sino 
también garantizar una experiencia satisfactoria para todos los usuarios involucrados. 
Los usuarios del sistema incluyen tanto a los empleados de la empresa que gestionan los 
bienes y suministros como a los proveedores que interactúan con el sistema para cumplir 


con las órdenes de compra. 


2. Descripción General del 


Sistema 


El sistema "Pata Amarilla" está disefado para optimizar la gestión de bienes y 
suministros dentro de la empresa, abordando varias áreas clave que son esenciales para 
el funcionamiento eficiente y coordinado de la organización. Este sistema es una solución 
integral que no solo facilita la administración de inventarios, sino que también mejora la 
comunicación y la colaboración entre los diferentes departamentos o áreas. A 
continuación, se describen en detalle las áreas clave y las funcionalidades específicas del 


sistema. 


El sistema integra seis áreas principales: Usuario, jefe, Administración, Proveedor, 
Logística y Almacén. Cada una de estas áreas tiene un conjunto de funcionalidades 
disefiadas para manejar sus responsabilidades específicas de manera eficiente. La 
integración de estas áreas en un único sistema centralizado permite una coordinación y 
un flujo de trabajo sin interrupciones, lo cual es fundamental para la gestión efectiva de 


bienes y suministros. 


Área de Usuario 


El área de Usuario está disefada para que los empleados de la empresa puedan 
interactuar con el sistema de manera sencilla y efectiva. Los usuarios pueden realizar 
acciones como ver ítems disponibles, generar solicitudes de suministros, rastrear el 
estado de sus solicitudes para que los usuarios puedan ver en qué área se quedó su 
solicitud y realizar sus reclamos o quejas directamente a esa área, consultar el historial 
de solicitudes y actualizar su perfil personal. Estas funcionalidades aseguran que los 
usuarios tengan acceso a la información que necesitan y puedan gestionar sus 


necesidades de suministros de manera autónoma y eficiente. 
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A 


EA AREA DE USUARIOS 


Perfil 


Nombre: CARLOS GUILLERMO Apellido: GOMEZ AGUIRRE 
CARLOS GUILLERMO GOMEZ Email: carlosgomezaguirre28(dgmail.com 
AGUIRRE ) 
Área: Usuarios Cargo: usuario 


Actualizar Perfil 


Nombre Apellido 
Ver Ítems 
Email 
Generar Solicitud - 
Área Cargo 
Rastrear Solicitudes Nueva Contrasefia 
Historial de Solicitudes Confirmar Nueva Contrasefia 


| - 


Área del jefe 


En esta parte lo que el jefe hace es ver todas las listas de las solicitudes que los usuarios 


están enviando y solamente lo que el jefe hace es aceptar todos los ítems que los usuarios 
solicitan y cuando acepta la lista de ítems solicitados por los usuarios automáticamente 


se envia al área de administración. También tiene un buscador si desea buscar por 


persona para que acepte solamente la solicitud de esa persona buscada. 


TABLA DE ITEMS SOLICITADOS 


ID Descripción Cantidad Precio DNI Usuario Numero de Boleto 
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Área de Administración 


El área de Administración es crucial para la supervisión y la gestión de todas las 
actividades relacionadas con bienes y suministros. Los administradores pueden aprobar 
usuarios, monitorear solicitudes, gestionar inventarios, generar reportes y ajustar 
configuraciones del sistema, además de eso ellos son los encargados de aceptar la 
inscripción de los trabajadores para que formen parte de la empresa y solamente los que 
se inscriben por usuario podrán ingresar directamente al programa y los demás tienen 
que ser aceptados por administración. Esta área garantiza que las políticas y 
procedimientos de la empresa se cumplan, y que todas las operaciones se realicen de 


manera transparente y conforme a las normas establecidas. 


Ea 


= Su AREA DE ADMINISTRACION 


&) Perfil 

Nombre: CELSO Apellido: GOMEZ CAJAS 

CELSO GOMEZ CAJAS Email: gomez(dgmail.com 
Área: Administración Cargo: Administrar 

as Rene 
Nombre Apellido 
Aprobar Usuarios 

Email 

Monitoreo de Solicitudes 
Área Cargo 


Gestión de Usuarios 
Nueva Contrasefia 


Gestión de Inventario 


Confirmar Nueva Contrasefia 


Área de Proveedor 


El área de Proveedor facilita la interacción entre la empresa y sus proveedores, pero más 
está relacionado con el área de logística porque tienen una interacción mutua estas dos 
áreas ya que logística realiza la orden de compra de todos los bienes y suministros que 
desea y el proveedor los acepta y los bienes y suministros son enviados al área de almacén 
según la lista solicitada. Los proveedores pueden gestionar ofertas, aceptar órdenes de 
compra, registrar envíos, manejar facturación, consultar el historial de transacciones y 
actualizar su perfil. Esta funcionalidad asegura una comunicación clara y efectiva con los 
proveedores, permitiendo una gestión eficiente de las órdenes de compra y el 


cumplimiento oportuno de los pedidos. 


Los proveedores son los encargados de registrar o subir todos sus productos a la página 
para que sean vistos por el área de logística y también ellos se encargaran de administrar 


sus propios productos, cambiar el stock y los precios. 
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AREA DEL PROVEEDOR 


Perfil 


Nombre: KENY BRYAM Apellido: LORENZO PABLO 
KENY BRYAM LORENZO Email: lorensoGdgmail.com 
PABLO 
Área: Proveedores Cargo: distribuidor 


Actualizar Perfil 


Nombre Apellido 

solicitud 
Email 

Registrar Items 
e Área Cargo 
Gestión de Envios Nueva Contrasefia 
ct) ava! Confirmar Nueva Contrasefia Copilot en Windows (versión preliminar) 
Área de Logística 


El área de Logística se encarga de la gestión y coordinación de todas las actividades 
relacionadas con el suministro de bienes. Los responsables de logística pueden ver 
solicitudes, generar órdenes de compra, hacer seguimiento de las órdenes, gestionar 
proveedores y controlar inventarios. Esta área es esencial para asegurar que los bienes 
se adquieran y distribuyan de manera eficiente, minimizando retrasos y asegurando que 


los recursos estén disponibles cuando se necesiten. 


AREA LOGISTICA 


Perfil 
Nombre: JHONY EMANUEL Apellido: RAMOS TICSE 
Email: jhonyGdgmail.com 

Área: Logística Cargo: estadistica 


Actualizar Perfil 


Nombre Apellido 
Email 

Área Cargo 
Nueva Contrasefia 


Confirmar Nueva Contraseiia 
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Área de Almacén 


El área de Almacén maneja la recepción, almacenamiento y distribución de bienes. El 
personal de almacén puede registrar la recepción de bienes, gestionar inventarios, 
distribuir bienes, consultar el historial de inventario, generar reportes y mantenimiento 
de los bienes. Estas funcionalidades aseguran que los bienes se manejen de manera 
organizada y que se mantenga un control riguroso sobre el inventario, reduciendo 
pérdidas y asegurando la disponibilidad de bienes y suministros. En esta parte también 


a través de una pecosa se entregará los ítems solicitados por las diferentes áreas de la 


empresa. 


AREA ALMACEN 


Perfil 


Nombre: ALEXANDER EYNOR Apellido: HERRERA ESTEBAN 
Email: alexander(dgmail.com 
ALEXANDER EYNOR 
Slspina to noheeto Área: Almacén Cargo: supervisor 
Actualizar Perfil 
Nombre Apellido 


Recepción de Bienes 


Email 


Gestión de Inventario Área Cargo 


Nueva Contrasefia 
Distribución de Bienes 


Confirmar Nueva Contrasefia 
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3. Relación de envio de 


solicitud y Flujo del Proceso 


Solicitud de Ítems por el Usuario 


Generación de Solicitud: Los usuarios acceden al sistema y visualizan los ítems 
disponibles. Generan una solicitud especificando los ítems necesarios y cantidades. La 


solicitud se envía al jefe del área correspondiente para su aprobación. 


Café en Grano 3 45 Eliminar 
Impresora Láser 4 900 Eliminar 
Refrigerador 2 2500 Eliminar 
Moto XYZ 2 15000 | Eliminar | 
Ver ítems 
Zapatos de Cuero 4 250 | Eliminar | 
Generar Solicitud Zapatos de Cuero 1 250 Eliminar 


Rastrear Solicitudes Enviar Pedido 


Aprobación de Solicitudes por el jefe: El jefe de área revisa y aprueba las 
solicitudes de los usuarios. Las solicitudes aprobadas se envían al área de Administración 


para una segunda aprobación. 


E 
TABLA DE ITEMS SOLICITADOS 
ID Descripción Cantidad Precio DNI Usuario Numero de Boleto 
184 Café en Grano 3 45 72137461 12 
185 Impresora Láser 4 900 72137461 12 
186 Refrigerador 2 2500 72137461 12 
187 Moto XYZ 2 15000 72137461 12 
188 Zapatos de Cuero 4 250 72137461 12 


189 Zapatos de Cuero 1 250 72137461 12 
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Aprobación de por Administración: Las solicitudes luego de ser aprobados por el 
jefe se envían al área de Administración para una segunda aprobación. Administración 


aprueba la solicitud y la envia al área de Logística. 


Aprobar Usuarios 


cl 72137461 4 LUZ CLARA SANTIAGO ALDABA 14 


SANTIAGO ALDABA 4 12 ” 
Aceptar Solicitud 
oerpeóntam | cutiod | pio [omni | nimmnpeido | omite | 
3 12 


Café en Grano 45.00 72137461 73268144 
Impresora Láser 4 900.00 72137461 12 73268144 
Refrigerador 2 2500.00 72137461 12 73268144 
Moto XYZ 2 15000.00 72137461 12 73268144 
Zapatos de Cuero 4 250.00 72137461 12 73268144 
Zapatos de Cuero 1 250.00 72137461 12 73268144 


Gestión de Solicitudes en el Área de Logística: Logística recibe las solicitudes 
aprobadas y verifica el stock disponible. Si el stock es insuficiente, Logística consolida las 
solicitudes y genera órdenes de compra. Realiza cotizaciones con varios proveedores y 
selecciona la mejor oferta. Genera las órdenes de compra y las envia para los proveedores 
y los proveedores recibirán la lista de bienes y suministros y si cuentan con la necesario 


ellos aceptan esa orden de compra y llevan sus productos al almacén. 


€ Solicitudes 


luz clara 


72137461 ” Seleccionar Número deP w Aceptar Compra 


ID DNI Registrador Número Pedido Descripción Item Cantidad Precio DNI Administrador Fecha Creación 


72137461 12 Café en Grano 
72137461 12 Impresora Láser 


45.00 22660066 21/7/2024, 7:13:16 a. m 
900.00 22660066 217/2024, 7:13:16 a. m 


72137461 12 Refrigerador 2 2500.00 22660066 21/7/2024, 7:13:16 a. m 
72137461 12 Moto XYZ 2 15000.00 22660066 217/2024, 7:13:16 a. m. 


72137461 12 Zapatos de Cuero 250.00 22660066 217/2024, 7:13:16 a. m 
72137461 12 Zapatos de Cuero 250.00 22660066 217/2024, 7:13:16 a. m 
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El área de logística también genera las ordenes de comprar para que almacén contenga 
todos los productos necesarios y para ello hace sus pedidos de los productos que necesita 


y luego son enviados al proveedor para su aprobación 


la siguiente tabla muestra todos los productos que son cargados por los proveedores: 


AREA LOGISTICA 


1 Moto XYZ Vehículos 15000.00 95 Unidades 71885493 
2 Laptop ABC Electrónicos 3500.00 35 Unidades 71885493 
3 Camisa Formal Ropa 120.00 187 Unidades 71885493 
4 Manzana Alimentos 3.50 ars Kilogramos 71885493 
5 Escritorio Muebles 450.00 o Unidades 71885493 
6 Refrigerador Electrodomésticos 2500.00 3 Unidades 71885493 Seleccionar 
TV LED 50 Electrónicos 2200.00 20 Unidades 71885493 


8 Silla de Oficina Muebles 320.00 52 Unidades 71655493 Seleczonar 


Luego se selecciona los productos y se hace una lista para pedir a los proveedores los 
productos que están faltando en almacén. La lista de productos que esta seleccionando 


para la orden de compras está en la siguiente tabla: 


Lista de Bienes y Suministros Para Solicitar 


Nombre Precio Cantidad DNI Proveedor Acción 


Cerrar 


Si estás de acuerdo con la lista de los bienes y suministros que estas solicitando entonces 
lo que sigue es solamente completar tu ubicación y presionar un botón para que se envié 
a los proveedores tus bienes y suministros seleccionados. En la siguiente parte te muestra 


ese proceso: 
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Órdenes de Compra 


REGIÓN: 
PROVINCIA: 


DIRECCIÓN: 


Generar Orden de Compra 


Aceptación del orden de compra por parte del proveedor: los proveedores 
pueden visualizar toda la lista de los productos que son solicitados por parte de logística 
y luego ellos aceptan todos los pedidos, pero antes el programa verifica si tienen todos 
los bienes y suministros cargados en el sistema y si no lo tienen no se va aceptar y para 
ello ellos tienen que cargar sus productos contantemente para que en el programa su 


stock no este vacio. 


AREA DEL PROVEEDOR 


orden de compra pendiente 


7 


3 Camisa Formal 120 


8 Silla de Oficina 320 7 Aceptar 


13 Juguete Educativo 45 5 Aceptar 


9 Zapatos de Cuero 250 f 
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Recepción de Bienes en el Area de Almacén: Almacén recibe los bienes entregados 
por los proveedores. Verifica los bienes contra las órdenes de compra y registra la entrada 
en el sistema. Emite una guía de remisión y distribuye los bienes solicitados mediante 


una pecosa. 


AREA ALMACEN 


LISTA DE ITEMS RECIBIDOS DEL PROVEEDOR 


Seleccione una Orden Confirmar los Productos 


ID Nombre Precio Cantidad 
3 Camisa Formal 120 7 
8 Silla de Oficina 320 7 
9 Zapatos de Cuero 250 rd 
13 Juguete Educativo 45 5 


Gestión de Bienes en el Área de Patrimonio: Antes de distribuir bienes, 
Patrimonio asigna códigos patrimoniales y genera etiquetas para los bienes. Administra 


y controla la ubicación de los bienes dentro de la empresa. 


Distribución Final y Notificaciones: Almacén distribuye los bienes a los usuarios 
solicitantes y actualiza el sistema con la entrega. Los usuarios reciben notificaciones 


sobre el estado y la entrega de sus solicitudes. 


Flujo del Proceso de la empresa 


e Solicitud de Ítems: Usuario — jefe de Área — Administración — Logística 

e Aprobación de Solicitudes: jefe de Área — Administración Logística 

e Generación de Órdenes de Compra: Logística > Proveedores 

e Recepción y Distribución de Bienes: Proveedores — Almacén — Patrimonio o 
pecosa— Usuarios 

e Gestión de Bienes: Patrimonio — Almacén — Usuarios 

e Seguimiento de las solicitudes: — jefe de Área — Administración — Logística 

e Apartado de envió de mensaje: todas las áreas se pueden enviar mensajes sobre 


las inconveniencias que tiene para que se solucionen 
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4. Descripción del Flujo 


Elusuario genera una solicitud de ítems a través del sistema 


El proceso comienza cuando un usuario, generalmente un empleado de la empresa, 
identifica la necesidad de ciertos ítems o suministros para realizar sus tareas diarias. 
Utilizando el sistema, el usuario genera una solicitud donde detalla los ítems necesarios, 
la cantidad y las fechas en que se requieren. Esta solicitud incluye información crucial 
como la descripción de los ítems, la cantidad solicitada, el área de destino y la prioridad 
de la solicitud. Este paso es fundamental porque establece la base para todo el flujo de 
trabajo posterior, asegurando que las necesidades de los usuarios se registren de manera 
precisa y sistemática. La interfaz amigable del sistema facilita la creación de solicitudes, 


permitiendo a los usuarios especificar sus requerimientos con claridad y sin errores. 
Eljefe de área revisa y aprueba la solicitud 


Una vez que la solicitud ha sido creada, se envía automáticamente al jefe de área 
correspondiente para su revisión y aprobación. El jefe de área tiene la responsabilidad 
de verificar que la solicitud sea válida y necesaria para el funcionamiento del 
departamento. Esta revisión incluye la evaluación de la justificación de la solicitud, la 
cantidad de ítems solicitados y la disponibilidad de presupuesto para cubrir la compra. 
Si la solicitud cumple con todos los criterios, el jefe de área la aprueba y la envia a la 
siguiente etapa. Esta capa de aprobación inicial es crucial para asegurar que solo se 
procesen solicitudes legítimas y necesarias, evitando el uso indebido de recursos y 
garantizando que los suministros solicitados sean realmente necesarios para las 


operaciones del área. 
El área de Administración verifica y aprueba la solicitud 


Después de la aprobación del jefe de área, la solicitud se envia al área de Administración 
para una segunda revisión. La administración verifica la precisión y la necesidad de los 
recursos solicitados, asegurándose de que la solicitud cumpla con las políticas y 
presupuestos de la empresa. Esta capa adicional de aprobación garantiza un control 
riguroso sobre los recursos, evitando duplicidades y asegurando una distribución 
eficiente de los mismos. La administración también verifica que la solicitud esté alineada 
con las metas y prioridades estratégicas de la empresa. Si la solicitud pasa esta revisión, 


se aprueba y se envía al área de Logística para su procesamiento. Esta segunda capa de 
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aprobación es fundamental para mantener la integridad y la eficiencia del proceso de 


gestión de suministros. 


El área de Logística consolida las solicitudes, verifica el 


stock y realiza órdenes de compra 


Con la solicitud aprobada por la administración, el área de Logística asume la 
responsabilidad de gestionar la adquisición de los ítems solicitados. Logística revisa el 
inventario actual para determinar si los ítems están disponibles en stock. Si los ítems no 
están disponibles, Logística consolida todas las solicitudes similares y procede a generar 
órdenes de compra para adquirir los ítems necesarios. Este proceso incluye la solicitud 
de cotizaciones a varios proveedores, la evaluación de las ofertas recibidas y la selección 
del proveedor que ofrezca la mejor combinación de precio y calidad. Una vez 
seleccionado el proveedor, se genera una orden de compra detallada y se envía al 
proveedor para su cumplimiento. Este paso es crucial para asegurar que los suministros 
se adquieran de manera eficiente y económica, manteniendo un control riguroso sobre 


elinventario y los costos. 
El proveedor entrega los bienes al área de Almacén 


Una vez que el proveedor ha recibido y procesado la orden de compra, prepara los bienes 
solicitados y los envía al área de Almacén de la empresa. Al llegar los bienes, el personal 
de almacén realiza una verificación detallada para asegurarse de que los ítems 
entregados coincidan con las especificaciones y cantidades indicadas en la orden de 
compra. Esta verificación incluye la inspección de la calidad de los bienes y la revisión de 
la documentación adjunta, como guías de remisión y facturas. Este paso es fundamental 
para asegurar que los bienes recibidos cumplen con los estándares de la empresa y están 
en condiciones óptimas para su uso. Cualquier discrepancia o problema identificado 


durante esta verificación se comunica inmediatamente al proveedor para su resolución. 


El área de Almacén recibe y verifica los bienes, los registra 


y los distribuye a los usuarios 


Después de verificar que los bienes recibidos cumplen con las especificaciones, el área de 
Almacén procede a registrar la entrada de los ítems en el sistema de inventario. Este 
registro incluye detalles como la cantidad recibida, la fecha de recepción y el estado de 
los ítems. Una vez registrados, los bienes se almacenan de manera organizada, 
asegurando que estén fácilmente accesibles para su distribución futura. El personal de 
almacén luego distribuye los bienes a las áreas y usuarios que generaron las solicitudes, 


siguiendo un proceso organizado que asegura que cada ítem llegue a su destino 
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correspondiente de manera eficiente. Este paso asegura que los recursos necesarios estén 
disponibles para los usuarios a tiempo, minimizando interrupciones en las operaciones 


diarias de la empresa. 


El área de Patrimonio asigna códigos patrimoniales a los 


bienes y los etiqueta antes de la distribución 


Antes de que los bienes se distribuyan a los usuarios finales, el área de Patrimonio asigna 
códigos patrimoniales únicos a cada ítem y los etiqueta en consecuencia. Esta 
codificación es esencial para mantener un seguimiento preciso y detallado de todos los 
bienes de la empresa. Los códigos patrimoniales permiten rastrear la ubicación y el 
estado de cada ítem, facilitando la gestión de inventarios y la planificación de futuras 
adquisiciones. La etiqueta de cada ítem incluye información relevante como el código 
patrimonial, la descripción del bien y su ubicación dentro de la empresa. Este proceso de 
etiquetado y codificación asegura que todos los bienes se gestionen de manera 
organizada y que cualquier movimiento o uso de los ítems pueda ser fácilmente 


monitoreado. 


Los usuarios reciben los bienes y notificaciones sobre el 


estado de sus solicitudes 


Finalmente, una vez que los bienes han sido etiquetados y registrados, se distribuyen a 
los usuarios que realizaron las solicitudes originales. El sistema actualiza el estado de las 
solicitudes para reflejar la entrega de los ítems, y los usuarios reciben notificaciones 
sobre la disponibilidad de los bienes solicitados. Estas notificaciones pueden incluir 
detalles como la fecha de entrega, la ubicación de recogida y cualquier instrucción 
adicional relevante. La transparencia y la comunicación continua son clave en este paso 
para asegurar que los usuarios estén informados sobre el estado de sus solicitudes y 
puedan planificar en consecuencia. Esta comunicación efectiva ayuda a mantener la 
satisfacción del usuario y asegura que los recursos estén disponibles cuando y donde se 


necesiten. 
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5. Estructura del Código y la 


Función del Programa 


Estructura del código 
H— config 
H— controllers 
| !—RECE funciones,js 
H— models 
H— public 
H— ess 
| |-— administracion.css 
| | |-— almacen.css 
| |— AREA jefe.css 
| |—ogistica.css 
| |-—logueo.css 
| |-— proveedor.css 
| |-— registro.css 
| !— usuario pantalla.css 
-— imagenes 
L= o J S 


-— administracion perfiljs 
-— administracion.js 

-— com orden frontend.js 
-— entrada.js 

-— frontend.js 

-H— jefe.js 

-— logi logistica.js 

-H— orden compra.js 


-— registro.js 
L— usuario.js 


t— routes 


| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| H— ACE, funciones.js 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 


H— ACE funciones.js 
H— administracion perfil.js 


H— com orden rutas.js 


| 
| 
| |-— aprobacion. solicitud.js 
| 
| 


H— consultaDni.js 
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-— items.js 
-— jefe area.js 
-— logistica.js 


H— RECE ordenes.js 
-— RUTA JEFE jefe manejo.js 
L— usuarios.js 


| 
| 
| 
| |-— pedidos,js 
| 
| 
| 


-— administracion.ejs 
-— almacen.ejs 
-H— jefe.ejs 


H— logueo.ejs 
H— proveedor.ejs 


-— registro.ejs 
L— usuario.ejs 
H— app.js 
H— package-lock.json 
| package.json 


| 
| 
| 
| |—logistica.ejs 
| 
| 
| 
| 


Explicación de la Estructura del Código 


Config 


La carpeta config es esencial para centralizar todas las configuraciones de tu aplicación. 
Aquí se almacenan archivos con configuraciones globales, como la configuración de la 
base de datos. Esto permite que ajustes estos valores sin modificar directamente el 
código fuente, facilitando la gestión y el despliegue de la aplicación en diferentes 


entornos. 
Controllers 


En la carpeta controllers se encuentra la lógica de negocio de la aplicación. Los 
controladores actúan como intermediarios entre las peticiones del cliente (a través de las 
rutas) y los modelos de datos. Se encargan de procesar las solicitudes entrantes, aplicar 
la lógica necesaria y devolver las respuestas adecuadas. Por ejemplo, un controlador 


puede manejar la lógica para crear, leer, actualizar o eliminar datos en la base de datos. 
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Models 


La carpeta models contiene los modelos de datos que representan las estructuras de tu 
base de datos. Los modelos definen cómo se estructura la información y cómo se 
interactúa con la base de datos. Aquí se establecen los esquemas de los datos y los 
métodos necesarios para acceder y manipular dichos datos, asegurando que todas las 


operaciones con la base de datos sigan las mismas reglas. 
Public 


La carpeta public es donde se almacenan todos los recursos estáticos accesibles 


públicamente desde el cliente, como archivos CSS, JavaScript e imágenes. 


CSS: La subcarpeta css contiene las hojas de estilo que definen la apariencia 
visual de la aplicación. Cada archivo CSS puede estar dedicado a una sección 
específica de la aplicación, permitiendo una organización clara y modular.En esta 
parte se encuentra el disefio que va tener cada apartado delas pantallas que se van 


a mostrar. 


Imágenes: La subcarpeta imagenes almacena todas las imágenes utilizadas en 


el sitio web, como logos, iconos y gráficos. 


JS: La subcarpeta js incluye archivos JavaScript que contienen la lógica o las 
funciones que va hacer el programa, encargándose de la interactividad y el 


comportamiento dinámico de la aplicación web. 
Routes 


En la carpeta routes se definen todas las rutas de la aplicación. Cada archivo de esta 
carpeta corresponde a un conjunto de rutas relacionadas con diferentes funcionalidades 
de la aplicación. Las rutas gestionan las solicitudes HTTP, determinan qué controlador 


se debe Ilamar y qué acción realizar en función de la URL y el método de solicitud. 
Views 


La carpeta views almacena las vistas de la aplicación. Estas vistas son plantillas HTML. 
Utilizan motores de plantillas como EJS para generar contenido HTML dinámico basado 
en los datos proporcionados por los controladores. Cada archivo en esta carpeta 
representa una página o una sección de la aplicación, proporcionando una estructura 


clara y organizada para el contenido visual. 


app.js 


El archivo app.js es el punto de entrada principal de la aplicación Node.js. Aquí se 


configura y se inicia la aplicación, incluyendo la configuración del servidor, la conexión 


CAPÍTULO VI: Caso Práctico (Empresa de Turismo PATA AMARILLA) | 304 


a la base de datos y la definición de rutas principales. Este archivo actúa como el núcleo 
de la aplicación, inicializando todos los componentes necesarios para que la aplicación 


funcione. 
package-lock.json y package.json 
Estos archivos son cruciales para la gestión de dependencias del proyecto. 


package.json: Define las dependencias que necesita tu aplicación para 


funcionar, especificando las versiones y los scripts de ejecución. 


package-lock.json: Asegura que se instalen las mismas versiones de los 
paquetes en todos los entornos donde se despliegue la aplicación, garantizando 


consistencia y estabilidad en las dependencias. 


6. Funcionalidad de toda la 


página y el código 


> Primero para usar el programa tienes que registrarte 


Registro de Usuario 


Nombre: 


oo 


Apellido: 


Área: 


Selecciona un área 


é Ya tienes una cuenta? Inicia sesión aqui 
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El bloque <head> del documento HTML contiene meta-información sobre la página, 


incluyendo el título y enlaces a hojas de estilo CSS. 


Cuerpo de la Página (<body>) 


El bloque <body> contiene el contenido visible de la página web. Dentro de este, el <div 
class="container"> actúa como el contenedor principal que encapsula todo el contenido 
de la página. Este contenedor incluye un encabezado principal <h1>Registro de 
Usuario</h1> que identifica la página como el formulario de registro de usuarios para 
que todos los que desean ingresar a la pagina a puedan rellenar sus datos y poder entrar 


a la página. 
Formulario de Registro (<form id="registerForm">) 


El formulario permite a los usuarios ingresar sus datos personales para registrarse. Cada 
campo de entrada se agrupa en <div class="form-row"> para facilitar el disefo y la 
estructura. Las filas del formulario ayudan a alinear los campos de entrada uno al lado 
del otro, mejorando la organización visual. Dentro de cada fila, los campos de entrada 
están agrupados en <div class="form-group">, que contiene una etiqueta 


(<label>) y el campo de entrada correspondiente (<input>). 


Por ejemplo, el primer grupo de formulario contiene una etiqueta <label 
for="dni">DNI:</label> para el campo de entrada del DNI, junto con un <div 
class="input-group"> que agrupa el campo de entrada del DNI y el botón de 
búsqueda. El campo de entrada del DNI se define como <input type="text" id="dni" 
name="dni" required style="flex: 2;"> y el botón de búsqueda se define como 
<button type="button" id="fetchDniData" class="small-button" style="flex: 
1;">buscar</button>, ambos disefiados para ajustarse proporcionalmente dentro del 


contenedor padre. 


Otros campos de entrada incluyen el nombre (<input type="text" id="nombre" 
name="nombre" readonly required>), apellido (<input type="text" 
id="apellido" name="apellido" readonly required>), y correo electrónico 
(<input type="email" id="email" name="email" required>). Además, se 
incluye un menú desplegable para seleccionar el área (<select id="area" 


name="area" required>) con varias opciones como "Usuarios", "Administración", 
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"Almacén", "Proveedores”, y "Logística". También hay un campo de entrada para el cargo 


El botón de envio del formulario se define como 
permitiendo a los usuarios enviar el 

formulario. Además, hay un 

que se utiliza para mostrar mensajes de éxito después de enviar el formulario, 

proporcionando retroalimentación visual al usuario. Finalmente, un enlace de inicio de 

sesión dentro de permite a los usuarios existentes 


redirigirse a la página de inicio de sesión mediante 


La función que permite capturar el DNI para consultar en la reniec 


document . getElementById('fetch ata ).a ventListener » async () => 
const dni = document.getElementByI ).value; 
if (dni) £ 
try 
const response = await fetch( 
method: E 
headers: 


> 
body: JSON.stringify(( dni > 

p; 

const data = await response. json(); 

if (data.error) £ 


| alert(data.error); 

) else 1 
document 1] | ). value = data.nombres; 
document yId( 1) ).value = "$/data.apellidoPaterno) $/(data.apellidoMaterno/ ; 


k 
catch (error 
alert( 


Primero, se afiade un al botón con el para manejar el evento 


de clic. Cuando el usuario hace clic en este botón, se ejecuta una función asincrónica. 


Esta función obtiene el valor del campo de entrada con el . Si el campo no 
está vacio, la función procede a realizar una solicitud a la . Esta solicitud se realiza 
mediante un método a la , incluyendo el en el 


cuerpo de la solicitud. La función espera la respuesta de la , Y luego intenta convertir 
esta respuesta a formato . Sila API devuelve un error, se muestra una alerta con 
el mensaje de error. En caso de que la consulta sea exitosa, los campos de entrada para 
nombre y apellido se completan automáticamente con los datos recibidos de la . Si 
ocurre algún error durante la solicitud, como problemas de red, se muestra una alerta 


informando al usuario del error ocurrido. 
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Función para capturar todos los valores y registrar en la base de datos 


document . getElementB erF -addEventL er('submit", async (event) 
event.! E()s 


const dni = document. getE d )-value; 

const nombre = document E : d omb )-value; 
const apellido = document tEl sy Id 11 ). value; 
const email = document ntByIc il').value; 

const area = document. € )-value; 

const cargo = document tE leme )-value; 


const response = await fetch( 
method: 5 
headers: 


1 
Ts 
body: JISON.s fy(1 dni, nombre, apellido, email, area, cargo )) 


JF 


const data = await response.json(); 


if (response.ok) 1 
document . getElementById('s ç +- -« innerText data.success; 
else 1 
document . getElementBy Id g - innerText 


El código se encarga del registro de un nuevo usuario. Se afiade un al formulario 
con el para manejar el evento de envio. Cuando se envía el formulario, 
se ejecuta una función asincrónica que previene el comportamiento por defecto del 
formulario utilizando Esto permite manejar el envio del 
formulario mediante JavaScript en lugar de la forma tradicional. La función obtiene los 
valores de los campos de entrada del formulario, incluyendo DNI, nombre, apellido, 
email, área y cargo. Luego, se envia una solicitud a la ruta 

, incluyendo estos datos en el cuerpo de la solicitud. La 
función espera la respuesta de la API y la convierte a formato JSON. Si el registro es 
exitoso, se muestra un mensaje de éxito en el elemento con el . En 
caso de que ocurra un error, se muestra un mensaje de error en el mismo elemento, 


proporcionando retroalimentación al usuario sobre el estado del registro. 
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Función de la ruta para conectarse con la reniec y sacar los datos 


router. post » async (req, res) => 
const ( dni ) = reg.body; 
if (!dni) « 
| return res.status(400).j 


) 


const token = 


try f 
const response = await axios.get 
headers: 1 


const persona = response.data; 


if (persona.numeroDocumento 
| res. json(persona); 
else 


| res.status(484). json(f error: 


) catch (error) f 
console.error 


res.status(500). json(( error: 


El código presentado define una ruta en un servidor para consultar datos de un usuario 


mediante su DNI. La ruta está configurada para manejar solicitudes en el 
raíz Dentro de la función asíncrona que maneja la solicitud, primero se 
extrae el DNI del cuerpo de la solicitud utilizando Siel DNI 


no está presente, la función devuelve una respuesta con un código de estado 


y un mensaje de error indicando que el DNI es requerido. 


Una vez que se ha validado la presencia del DNI, se define un token de autenticación 
. Este 

token es necesario para autenticar las solicitudes a la API externa que se utiliza para 

obtener los datos del usuario. La función entonces intenta realizar una solicitud GET a la 

API externa utilizando 

En la solicitud se incluyen encabezados de referencia y autorización para autenticar la 


solicitud. 


Si la solicitud a la API es exitosa, la respuesta de la API se almacena en la variable 
persona. La función verifica si la API ha devuelto un número de documento 


Si es así, se envían los datos de la persona en la 
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respuesta al cliente. Si no se encuentra el DNI, la función devuelve una respuesta con un 
código de estado y un mensaje de error indicando que el DNI no fue 


encontrado. 


En caso de que ocurra un error durante la solicitud a la API, este es capturado en un 
bloque catch. El error se registra en la consola 
y se devuelve una respuesta con un código de estado 
y un mensaje de error indicando que hubo un problema al conectar con 
la API. 


La función principal de registrarse 


const e 
const router 
const Usuario = 


router. post egist >» async (req, res) => ( 
const f dni, nombre, apellido, email, area, cargo ) = req.body; 


if (!dni || !nombre || !apellido || !email || !area || !cargo) £ 
return res.status (406 nd ) 


const usuarioExistente = await Usuar e(( where: ( dni ) 3); 
if (usuarioExistente 
return res.status(400).send( 1 e 


const nuevoUsuario = await Usuario.create(( 


nombre, 
apellido, 
email, 
contrasefia: 
area, 
cargo, 


» error); 


> 


Ds 


module.exports = router; 
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El código define una ruta en un servidor Express para registrar un nuevo usuario. La ruta 
está configurada para manejar solicitudes POST en el endpoint /registrar. Dentro de 
la función asincrónica que maneja la solicitud, se extraen los datos del cuerpo de la 
solicitud (req.body), incluyendo dni, nombre, apellido, email, área y cargo. Es 
importante verificar que todos estos campos estén completos, y si falta alguno, la función 
devuelve una respuesta con un código de estado 400 (Bad Request) y un mensaje 


indicando que todos los campos son obligatorios. 


Una vez que se ha validado la presencia de todos los campos, la función intenta verificar 
si ya existe un usuario con el mismo DNI en la base de datos. Esto se hace mediante la 
función Usuario.findOne(f where: 1 dni ) )), que busca en la base de datos un 
registro que coincida con el DNI proporcionado. Si se encuentra un usuario existente, la 
función devuelve una respuesta con un código de estado 400 y un mensaje indicando que 


el usuario ya existe. 


Si no se encuentra un usuario con el mismo DNI, se procede a crear un nuevo registro en 
la base de datos. La función Usuario.create se utiliza para crear un nuevo usuario con 
los datos proporcionados. La contrasefia del usuario se establece como el mismo DNI por 
simplicidad. Si la creación del usuario es exitosa, se devuelve una respuesta JSON con 


un mensaje de éxito indicando que el usuario ha sido registrado exitosamente. 


En caso de que ocurra un error durante el proceso de verificación o creación del usuario, 
este es capturado en un bloque catch. El error se registra en la consola 
(console.error('Error al registrar usuario:', error);) y se devuelve una respuesta 
con un código de estado 500 (Internal Server Error) y un mensaje indicando que 


hubo un problema al registrar el usuario. 


El Router de Express se utiliza para definir rutas de forma modular y manejarlas en 
archivos separados, mejorando la organización del código. Esto se hace mediante la 
línea const router = express.Router();. La ruta está configurada para manejar 
solicitudes | POST en el  endpoint  /registrar, definida por 
router.post('/registrar', async (req, res) => 1... ));. Esto significa que el servidor 
espera recibir datos en el cuerpo de la solicitud para procesar el registro de un nuevo 


usuario. 


Es crucial verificar que todos los campos necesarios estén presentes en la solicitud. Esto 


se realiza con la condición if (!dni | 


'nombre | 


!apellido | 


!'email | 


!area || 
!cargo) 1... 3, que devuelve un error 400 si falta algún campo obligatorio, asegurando 
que todos los datos necesarios para registrar un usuario están completos. Antes de crear 


un nuevo usuario, el código verifica si ya existe un usuario con el mismo DNI en la base 
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de datos usando const usuarioExistente = await Usuario.findOne(4 where: f 


dni J 3);. Esto previene duplicados y asegura la unicidad del DNI en el sistema. 


Si no se encuentra un usuario con el mismo DNI, el código procede a crear un nuevo 
registro en la base de datos con const nuevoUsuario = await Usuario.create(L ... 
3);. Esto afiade un nuevo usuario a la base de datos con la información proporcionada en 
la solicitud. El bloque catch captura cualquier error que ocurra durante el proceso de 
verificación o creación del usuario. Los errores se registran en la consola y se devuelve 
una respuesta con un error 500 al cliente, indicando que hubo un problema interno al 


registrar el usuario. 


La base de datos de los usuarios registrados 


current timestamp(), 


ENGINE=InnoDB CHARSET=utf8mb4 =utf8mb4 general ci; 


La tabla usuarios se utiliza para almacenar información básica sobre los usuarios 
registrados en el sistema. El campo dni es de tipo varchar(8) y sirve como clave 
primaria, asegurando la unicidad de cada registro y no permitiendo valores nulos (NOT 


NULL). Este campo almacena el dni del usuario. 


Los campos nombre, apellido, email, contraseia, área y cargo son detipo varchar(100) 
y también tienen la restricción NOT NULL, garantizando que estos campos siempre 
contengan información válida y esencial sobre cada usuario. nombre y apellido 
almacenan el nombre y apellido del usuario respectivamente, mientras que email 
almacena la dirección de correo electrónico y contrasefa guarda la contrasefia del 
usuario. área y cargo especifican el departamento y el puesto del usuario dentro de la 


organización. 


Los campos createdAt y updatedAt son de tipo datetime y se utilizan para registrar las 


marcas de tiempo de creación y última actualización de cada registro. createdAt se 
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establece automáticamente en la fecha y hora actuales al crear un nuevo registro, y 


updatedAt se actualiza automáticamente cada vez que se modifica el registro. 


Finalmente, el campo activo es de tipo varchar(255) con un valor predeterminado de 
“inactivo'. Este campo indica si el usuario está activo en el sistema, proporcionando una 


manera sencilla de gestionar el estado de los usuarios. 


> Continuamos con la parte de Logueo para ingresar a las áreas 


RILA 


UCO “5 


Logueo 


E Il 


Contrasefia: 


Registrate aqui 


Mostrar escritorio 


La página de inicio de sesión se estructura mediante el archivo logueo.ejs, que define 
la estructura HTML de la interfaz, y el archivo logueo.css, que define los estilos visuales. 
Estos dos archivos trabajan juntos para crear una experiencia de usuario atractiva y 


funcional. 


En el archivo logueo.ejs, el encabezado (<head>) contiene meta-información sobre la 
página, incluyendo el juego de caracteres, la configuración de la vista para asegurar la 
responsividad en dispositivos móviles y el título de la página. Además, incluye un enlace 
a la hoja de estilos logueo.css. En el cuerpo (<body>), la página se estructura en dos 
secciones principales: el encabezado y el contenido principal. El encabezado (<div 
class="header">) incluye una imagen de logo y un título de bienvenida. La imagen del 
logo se carga desde la carpeta public/images y se muestra al lado del título 
"Bienvenido". El contenido principal (<div class="main-content">) contiene un 
formulario de inicio de sesión, con campos para el correo electrónico y la contrasefia, y 
un botón para enviar el formulario. También hay una sección para mostrar mensajes de 


error y un enlace para registrar nuevos usuarios si aún no tienen una cuenta. 
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El archivo logueo.css proporciona los estilos para asegurar que la página de inicio de 
sesión sea atractiva y fácil de usar. El cuerpo de la página (body) utiliza la fuente Roboto 
y tiene un fondo con un degradado lineal, asegurando que el contenido esté centrado 
tanto vertical como horizontalmente. Además, se afiade una capa oscura sobre el fondo 
para mejorar el contraste y la legibilidad del contenido. El encabezado (.header”) está 
disefiado para centrar el logo y el título, y el contenido principal ((main-content) 
asegura que el formulario y otros elementos estén bien distribuidos. El contenedor del 
formulario (.container) tiene un fondo blanco semitransparente, bordes redondeados 


y una sombra para darle relieve, creando un efecto visual agradable. 


Los campos de entrada y los botones del formulario están disefiados para ser fáciles de 
leer y usar. Los campos de entrada tienen un fondo blanco semitransparente y bordes 
redondeados, mientras que los botones tienen un color de fondo llamativo y cambian de 
color al pasar el cursor sobre ellos, proporcionando una clara indicación de 
interactividad. Los mensajes de error se muestran en rojo y están centrados, asegurando 
que sean visibles para el usuario. Además, los enlaces de registro están disefiados para 


ser visibles y atractivos, con un efecto de subrayado al pasar el cursor sobre ellos. 


Función de envio de datos 


Este código maneja el evento de envio del formulario de inicio de sesión. Al detectar que 
elformulario ha sido enviado (submit), se previene el comportamiento predeterminado 
del navegador (event.preventDefaulht()), lo que permite manejar el envio del 


formulario utilizando JavaScript en lugar de una solicitud estándar. 
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Los valores de los campos de entrada email y contrasefia se obtienen mediante 
document.getElementById('email).value y 
document.getElementById('contrasefia").value, respectivamente. Estos valores 
se utilizan para construir un objeto JSON que se envia al servidor mediante una solicitud 
fetch a la ruta /logueo. La solicitud fetch se configura para usar el método POST, se 
establecen los encabezados para indicar que el contenido es JSON, y se envían los datos 


de inicio de sesión en el cuerpo de la solicitud. 


El uso de JSON.stringify convierte el objeto JavaScript 1 email, contrasefia ) en 
una cadena JSON, que es el formato adecuado para enviar datos en el cuerpo de una 
solicitud HTTP. fetch es una API moderna de JavaScript para realizar solicitudes HTTP. 
La palabra clave await se utiliza para esperar la respuesta de la solicitud fetch antes de 
continuar con la ejecución del código, lo que permite manejar las solicitudes asíncronas 


de manera más sencilla. 


Una vez que el servidor responde, la respuesta se convierte a un objeto JSON (const 
data = await response.json()). Si la respuesta indica que el inicio de sesión fue 
exitoso (data.success), se procede a gestionar la información del usuario. Primero, si 
ya existe un elemento soledad en el localStorage, se elimina 
(localStorage.removelItem('soledad")). Luego, se almacena la información del 
usuario en localStorage bajo la clave soledad. localStorage es una API de 
almacenamiento web que permite almacenar datos en el navegador del usuario de 


manera persistente. 


Si el inicio de sesión no fue exitoso, el mensaje de error devuelto por el servidor se 
muestra en el elemento con el ID errorMessage 
(document.getElementById('errorMessage'").innerText = data.message). 
Esto proporciona una retroalimentación inmediata al usuario sobre el motivo del fallo 


en el inicio de sesión. 
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Función de dirigir a las diferentes áreas 


const usuario = JSON.parse(localStorage.getItem( 
const area = usuario.area; 
switch (area 
case - 
localStorage.removeItem( E 
window. location.href = h É 
break; 
case t - 
window. location.href : E 
break; 
case : : 
window. location. - 
break; 
case e 
window. location. - 
break; 
case “A = 
window. location. : 
break; 
case - 
window. location. E - 
break; 
default: 
| window. location. ogueo; 


Este código se enfoca en redirigir al usuario a la página correspondiente según su área 
una vez que el inicio de sesión ha sido validado exitosamente. Después de almacenar la 
información del usuario en , Se recupera esta información y se convierte 


nuevamente en un objeto JavaScript mediante 


La propiedad área del usuario se utiliza para determinar a qué página redirigir al usuario. 
Un bloque switch se encarga de redirigir al usuario a la página correspondiente según su 
área. Por ejemplo, si el área es Usuarios, se elimina cualquier elemento productos del 

y se redirige al usuario a la página . Otros casos incluyen 
redirecciones a páginas de administración, logística, proveedores, almacén o jefe, según 
el área del usuario. Si el área no coincide con ninguno de los casos, se redirige al usuario 


nuevamente a la página de inicio de sesión 


El uso de permite almacenar y recuperar datos de manera persistente en 
el navegador del usuario. se utiliza para redirigir al usuario a 
una nueva URL. Este mecanismo de redirección asegura que el usuario sea llevado a la 


página correcta según su rol o área dentro del sistema. 
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La función principal de Logueo que se conecta con la base de datos 


if (usuario 


reg.session.usuario = usuario; 


res. json(( 

success: true, 

usuario: 
dni: usuario.dni, 
nombre: usuario.nombre, 
apellido: usuario.apellido, 
email: usuario.email, 
area: usuario.area, 
cargo: usuario.cargo, 
createdat: usuario.createdat, 
updatedat: usuario.updatedat 


D; 
else 
| res.json(f success: false, message: 


) catch (error) ( 
console.error 


E » error); 
5006). json(( success: false, message: 
J 1 


El código define la ruta para manejar el inicio de sesión de los usuarios. 
Utiliza el paquete Express para crear un enrutador y el modelo Usuario para interactuar 
con la base de datos. Cuando se envia una solicitud POST a , el servidor recibe 
el email y la contrasefia del cuerpo de la solicitud. El código intenta encontrar un usuario 
en la base de datos con el correo electrónico y la contrasefia proporcionados, y que esté 
marcado como activo . Si se encuentra un usuario que coincide, se 
establece una sesión para el » Y se envían 
los datos del usuario de vuelta al cliente en formato JSON, indicando un inicio de sesión 
exitoso . Si no se encuentra un usuario que coincida, se devuelve una 
respuesta JSON indicando que el inicio de sesión falló, junto con un mensaje explicativo. 
En caso de que ocurra algún error durante el proceso, se captura y se registra en la 
consola, y se devuelve una respuesta JSON con un código de estado 500 y un mensaje de 


error. 


El segundo código define la ruta para manejar el cierre de sesión de los 
usuarios. Cuando se accede a esta ruta, se destruye la sesión del usuario actual utilizando 

, lo que elimina todos los datos de sesión almacenados en el 
servidor. Después de destruir la sesión, el servidor redirige al usuario a la página de inicio 
de sesión utilizando . Esta redirección asegura que, 
después de cerrar la sesión, el usuario sea llevado de vuelta a la página de inicio de sesión 


para que pueda iniciar sesión nuevamente si lo desea. 
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El método JSON.stringify se utiliza para convertir un objeto JavaScript en una cadena 
JSON. En el contexto de enviar datos al servidor, JSON.stringify se utiliza para 
convertir el objeto que contiene email y contrasefia en una cadena antes de enviarlo en 
el cuerpo de una solicitud HTTP. localStorage es una API de almacenamiento web que 
permite almacenar datos en el navegador del usuario de manera persistente. Los datos 
almacenados en localStorage no se eliminan cuando se cierra el navegador y se pueden 
acceder en futuras visitas a la página. fetch es una API moderna para realizar solicitudes 
HTTP. fetch devuelve una promesa que se resuelve con la respuesta de la solicitud. Es 
utilizada para realizar solicitudes asincrónicas al servidor, como enviar los datos de inicio 
de sesión y recibir una respuesta. await es una palabra clave utilizada para esperar una 
promesa. Cuando se usa await en una función asincrónica, la ejecución de la función se 
detiene hasta que la promesa se resuelve, permitiendo escribir código asincrónico de 


manera más clara y lineal. 


> Área de usuarios 


ED) AREA DE USUARIOS 


CARLOS GUILLERMO GOMEZ 
AGUIRRE 


Ver Ítems 


Generar Solicitud 


Rastrear Solicitudes 


Historial de Solicitudes 


Cerrar Sesión 


La estructura HTML comienza con la inclusión de los metadatos y la hoja de estilos 
usuario pantalla.css. En el cuerpo (<body>), se define un encabezado fijo que 
contiene el logo y un botón de cierre de sesión. La clase header se encarga de mantener 
el encabezado fijo en la parte superior de la página. La sección principal se divide en una 
barra lateral (sidebar) y el contenido principal (main-content). La barra lateral 
contiene la foto de perfil del usuario y botones de navegación para mostrar diferentes 
secciones (perfil, actividades, items). La sección de perfil muestra los datos del 


usuario y un formulario para actualizar su información. La sección de actividades 
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contiene una tabla para listar actividades y un botón para enviar pedidos. La sección de 


items incluye un campo de búsqueda y una tabla para listar items. 


El archivo usuario pantalla.css define estilos detallados para diferentes elementos 
de la página de administración de usuarios. El encabezado (header) está fijado en la 
parte superior de la página, con un fondo marrón oscuro y texto amarillo dorado. La 
barra lateral (sidebar) utiliza un gradiente marrón y tiene estilos para mostrar y ocultar 
elementos cuando está colapsada. El contenido principal (main-content) está alineado 
a la derecha de la barra lateral y tiene un fondo claro. La sección de perfil y la tabla de 
actividades tienen estilos específicos para la disposición de los datos y formularios, 


asegurando una apariencia limpia y profesional. 


Función para cargar datos en la tabla 


ody . appendChild(ror 


La función cargarActividades se encarga de cargar y mostrar los productos 
almacenados en el carrito en una tabla de actividades. Primero, obtiene los datos del 
carrito almacenados en el localStorage bajo la clave productos, utilizando JSON.parse 
para convertir la cadena JSON en un objeto JavaScript. Si no hay productos 
almacenados, se asigna un array vacio por defecto. Luego, selecciona el elemento 
<tbody> de la tabla con el ID actividadesTable y limpia su contenido estableciendo 
tbody.inner HTML en vacio. Esto asegura que la tabla se limpie antes de afiadir nuevos 


productos, evitando duplicados. 


A continuación, la función recorre el array de productos utilizando forEach. Para cada 
producto, se crea una nueva fila de tabla (<tr>) y se define su contenido utilizando 
plantillas literales para insertar los valores de descripción, cantidad y precio del 
producto. También se afiade un botón para eliminar el producto, que llama a la función 
eliminar Producto pasando el índice del producto como argumento. Finalmente, la fila 


creada se afiade al cuerpo de la tabla (tbody.appendChild(row)). Este proceso se 
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repite para cada producto en el carrito, asegurando que todos los productos se muestren 


en la tabla de actividades.» 


Función para cargar datos en la tabla 


La función eliminarProducto se encarga de eliminar un producto específico del carrito 
de compras, basado en su índice. Primero, la función obtiene los productos almacenados 
en el localStorage bajo la clave productos. Utiliza JSON.parse para convertir la 
cadena JSON almacenada en un array de objetos JavaScript. Si no hay productos 


almacenados, se asigna un array vacío por defecto. 


Una vez obtenido el array de productos, la función utiliza el método splice para eliminar 
un elemento del array en el índice especificado (index). El método splice modifica el 
array original, eliminando el elemento en la posición indicada. Después de eliminar el 
producto del array, la función actualiza el localStorage con el array modificado. Utiliza 
localStorage.setItem para almacenar el array actualizado, convirtiéndolo en una 
cadena JSON con JSON.stringify. 


Finalmente, la función llama a cargarActividades para actualizar la tabla de 
actividades en la interfaz de usuario. Esto asegura que la tabla refleje correctamente el 
estado actual del carrito de compras, mostrando los productos restantes después de la 
eliminación. 


La datos de la tabla se cargan en la tabla del siguiente grafico.donde las personas pueden 


hacer sus pedidos de los bienes y suministros que desean. 


AREA DE USUARIOS 


CARLOS GUILLERMO GOMEZ 
AGUIRRE 


caramelos bolsa 854 4.00 Seleccionar 


4 celular celular 843 1300.00 Seleccionar 


Acicfrcc 5 agua cielo botella 500ml 818 2.00 Seleccionar 


ZA Camisa Formal Unidades 4 120.00 Seleccionar 


Generar Solicitud 


8 Laptop ABC Unidades 24 3500.00 Seleccionar | 


Rastrear Solicitudes 9 Zapatos de Cuero Unidades 2 250.00 | Seleccionar 


Historial de Solicitudes N 10 Libro de Matemáticas Unidades 3 80.00 “Seleccionar | 
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Función para enviar todos los bienes y suministros elegidos 


async function enviar o 
const productos = JSON. (localStorage 
const usuario = JSON.pa localStorage.g 


1 
1 


const pedido = productos.map(producto => ( 
descripcion item: producto.descripcion, 
cantidad: producto.cantidad, 
precio: producto.precio, 
dni registrador: usuario.dni 


)); 


try « 
const response = await fetch( 
method: E 
headers: ( 
| 
+, 


body: JSON.stringify 


if (response.ok) 1 


localStorage.remove 
cargaractivid 

> else f 
alert 


> catch (error) ( 


console.error('E » error); 
alert( 0 
É; 
La función se encarga de enviar un pedido al servidor utilizando los datos 
almacenados en el -. Primero, la función obtiene los productos 
almacenados en el bajo la clave productos y los datos del usuario bajo la 
clave soledad. Utiliza para convertir las cadenas JSON almacenadas en 


objetos JavaScript. Si no hay productos en el carrito, se muestra una alerta indicando 


que no hay productos en el carrito y se finaliza la ejecución de la función utilizando 


Si hay productos en el carrito, se construye un objeto de pedido. Utilizando el método 
, Se transforma el array de productos en un array de objetos que contienen las 
propiedades descripcion item, cantidad, precio y dni registrador. Estas propiedades se 


asignan a partir de los datos de cada producto y el DNI del usuario registrado. 


La función se utiliza para enviar una solicitud HTTP al servidor en la ruta 
. La solicitud se configura para utilizar el método POST y enviar los datos 


del pedido en formato JSON. Para lograr esto, se establece el encabezado 
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como application/json y se utiliza JSON.stringify para convertir el objeto de pedido 


en una cadena JSON antes de enviarla en el cuerpo de la solicitud. 


La palabra clave await se utiliza para esperar la respuesta del servidor. Si la respuesta 
indica que la solicitud fue exitosa (response.ok), se muestra una alerta indicando que 
el pedido se envió correctamente. Luego, se elimina el carrito de productos del 
localStorage utilizando localStorage.removeItem('productos") y se actualiza la 
tabla de actividades llamando a la función cargarActividades. Si la respuesta no es 


exitosa, se muestra una alerta indicando que hubo un error al enviar el pedido. 


Si ocurre un error durante la solicitud fetch, se captura en el bloque catch, se registra en 
la consola para propósitos de depuración y se muestra una alerta indicando que hubo un 
error al enviar el pedido. En resumen, la función enviarPedido proporciona una 
manera robusta de manejar el envio de pedidos desde el cliente al servidor, asegurando 
que los datos se envíen correctamente y manejando cualquier error que pueda ocurrir 


durante el proceso. 


La función para obtener el número de boleta 


enerUltimoNumeroPed 


La función obtenerUltimoNumeroPedido es una función asíncrona que se encarga 
de obtener el último número de pedido registrado en la base de datos. Utiliza el método 
findByPk del modelo PedidoNumero para buscar un registro con la clave primaria 1. 
Si encuentra un registro, retorna el valor del campo número. Si no encuentra un registro, 
retorna 0 como valor por defecto. Esta función asegura que siempre se tenga un número 


de pedido válido, incluso si no hay registros previos en la tabla. 


Función para actualizar el número de pedidos 
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Es una función asíncrona que se encarga de actualizar el número de pedido en la tabla 
PedidoNumero. Primero, intenta encontrar un registro con la clave primaria 1 
utilizando findByPk. Si encuentra un registro, actualiza el campo número con el 
nuevoNumero proporcionado y guarda los cambios en la base de datos utilizando 
save. Si no encuentra un registro, crea un nuevo registro en la tabla con elid de 1y el 
nuevoNumero proporcionado. Esta función garantiza que el número de pedido 


siempre esté actualizado y listo para el próximo pedido. 


Conexión con la base de datos para crear un nuevo pedido 


Esta ruta define el manejo de solicitudes POST para crear nuevos pedidos. Cuando se 
recibe una solicitud POST en esta ruta, la función primero obtiene el cuerpo de la 
solicitud (req.body), que contiene los datos de los pedidos. Luego, llama a 
obtenerUltimoNumeroPedido para obtener el último número de pedido y calcula el 


nuevo número de pedido incrementándolo en uno. 


Usando moment-timezone, captura la fecha y hora actuales en la zona horaria de 
'America/Lima'y las formatea en 'YYYY-MM-DD HH:mm''. A continuación, agrega 
elnúmero de pedido y la fecha y hora a cada pedido en el cuerpo dela solicitud utilizando 


map. 


Luego, utiliza bulkCreate del modelo Pedido para insertar todos los pedidos en la base 
de datos en una sola operación. Después de crear los pedidos, llama a 
actualizar NumeroPedido para actualizar el número de pedido en la tabla 


PedidoNumero. 
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Si todo el proceso es exitoso, la función responde con un código de estado 201 indicando 
que los pedidos se crearon correctamente. Si ocurre un error, lo captura en el bloque 
catch, registra el error en la consola y responde con un código de estado 500 y un mensaje 
de error indicando que hubo un problema al crear el pedido. Esta ruta asegura la creación 
eficiente y correcta de nuevos pedidos, manejando adecuadamente los errores y 


actualizando el número de pedido para futuras solicitudes. 


En la siguiente grafica se muestre cuando realiza la solicitud de los bienes y suministros. 


Ss, AREA DE USUARIOS 


galleta | Eliminar 


CARLOS GUILLERMO GOMEZ 
sinbntdo caramelos 2 4 Eliminar 


celular 2 1300 Eliminar 


agua cielo 2 Pa Eliminar 


Enviar Pedido 


Ver Ítems 


Generar Solicitud 


> Base de datos de bienes solicitados 


mp 


ENGINE=InnoDB CHARSET=utf8mb4 - general ci; 


La tabla de pedido está disefiada para almacenar información detallada de cada pedido 
realizado. Contiene los campos id (clave primaria), descripcion item (descripción del 
ítem pedido), cantidad (número de ítems), precio (costo del ítem), dni registrador (DNI 
del usuario que registró el pedido), numero pedido (número secuencial del pedido), 
createdAt (fecha y hora de creación), y updatedAt (fecha y hora de la última 
actualización). Los campos createdAt y updatedAt utilizan marcas de tiempo que se 


establecen automáticamente cuando se crea o se actualiza un registro. La tabla está 
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configurada para utilizar el motor de almacenamiento InnoDB y el conjunto de 


caracteres UTF-8. 


> Funciones del área del jefe 


emosomeno come rcoça 


TABLA DE ITEMS SOLICITADOS 


ID Descripción Cantidad Precio DNI Usuario Numero de Boleto 
180 galleta 2 5 71302561 n 
181 caramelos 2 4 71302561 " 


182 celular 2 1300 71302561 u 


La estructura HTML comienza con la inclusión de los metadatos y el enlace a la hoja de 
estilos AREA, jefe.css. El cuerpo de la página está dividido en tres secciones principales: 


el encabezado, el contenido principal y el pie de página. 


El encabezado (<div class="header">) contiene un título centrado que indica el área de 


trabajo del jefe. 


El contenido principal (<div class="main-content">) incluye una sección de búsqueda 
(<div class="search-section">) con dos campos de entrada para buscar por apellido y 
nombre, y un botón para realizar la búsqueda. La sección de búsqueda ayuda a los jefes 
a filtrar los datos rápidamente. También se incluye un panel de control (<div 
class="dashboard">) que contiene una tabla para mostrar los pedidos registrados. La tabla 
tiene columnas para el ID del pedido, descripción, cantidad, precio, registrado por, y 
fecha. 


El pie de página (<div class="footer">) contiene un mensaje de derechos de autor. 
Finalmente, se incluye un enlace a un archivo JavaScript (jefe.js) que manejará la 


interacción del usuario con la página. 


El encabezado tiene un fondo con un gradiente de negro a gris oscuro, con texto en 
amarillo y una sombra en la parte inferior. El título en el encabezado tiene un tamafio de 
fuente grande y está centrado. La sección de contenido principal está centrada y tiene un 


relleno para separación del borde de la página. 
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La sección de búsqueda está disefiada con un fondo blanco, bordes redondeados y una 
sombra ligera. Los campos de entrada y el botón de búsqueda están estilizados para ser 
fáciles de usar y atractivos visualmente, con bordes redondeados y transiciones suaves al 
enfocarse o al pasar el cursor. Los contenedores de entrada están organizados en una 
columna en pantallas pequefias y en una fila en pantallas más grandes para una mejor 


responsividad. 


El panel de control tiene un fondo blanco, bordes redondeados y una sombra ligera para 
darle relieve. La tabla de pedidos está completamente estilizada para ser clara y fácil de 
leer, con filas alternas de colores para mejorar la legibilidad. Los encabezados de las 


columnas tienen un fondo amarillo claro y texto en negrita. 


El pie de página está fijado en la parte inferior de la página, con un fondo negro y texto 
en amarillo, y también tiene una sombra en la parte superior para separarlo visualmente 


del contenido principal. 


Función para cargar la tabla por el dni 


Esta función se ejecuta cada vez que el usuario escribe algo en el campo de búsqueda. 
Obtiene el término de búsqueda y realiza una solicitud a la API para obtener los usuarios 
que coinciden con el término. Si se encuentran usuarios, se Ilenan los campos de nombre 
y apellido con los datos del primer usuario encontrado, y se almacena su DNI. Luego, se 
cargan los pedidos asociados a ese DNI. Si no se encuentran usuarios, se limpian los 


campos de nombre y apellido y se cargan todos los pedidos sin filtrar por DNI. 
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Función para cargar toda la tabla de solicitudes 


TABLA DE ITEMS SOLICITADOS 


ID Descripción Cantidad Precio DNI Usuario Numero de Boleto 
180 galleta 2 5 71302561 n 
181 caramelos 2 4 71302561 n 

celular 2 1300 71302561 n 


183 agua cielo 2 2 71302561 n 


La función se encarga de obtener y mostrar los pedidos desde el servidor en una tabla 
HTML. Utiliza el método fetch para realizar una solicitud HTTP GET a la API del 


servidor en la ruta /api/pedidos, pasando opcionalmente un parámetro dni para 


filtrar los pedidos por el DNI del registrador. El uso de fetch devuelve una promesa que 
se resuelve con la respuesta de la solicitud. Una vez que se recibe la respuesta, se utiliza 
response.json() para convertirla en un objeto JavaScript, que en este caso es un array 
de pedidos. La propiedad await se utiliza para esperar a que esta promesa se resuelva 


antes de continuar con la ejecución del código. 


Después de obtener los pedidos, se limpia el contenido actual del cuerpo de la tabla de 
pedidos (pedidosTableBody.innerHTML = ";) para evitar mostrar datos 
duplicados. Luego, se recorre el array de pedidos utilizando el método forEach. Para 


cada pedido, se crea una nueva fila de tabla (<tr>), y se define su contenido HTML 
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utilizando plantillas literales para insertar dinámicamente los valores del TD del pedido, 
descripción del ítem, cantidad, precio, DNI del registrador y número del pedido en las 
celdas de la fila. La propiedad es una API moderna para realizar solicitudes HTTP. 
En este caso, se utiliza para enviar una solicitud GET al servidor para obtener los pedidos. 
La URL incluye el parámetro dni para filtrar los pedidos si se proporciona un valor. El 
método se utiliza para parsear la respuesta de la solicitud HTTP y 


convertirla en un objeto JavaScript. Es una operación asincrónica y se espera con 


Finalmente, cada fila creada se afade al cuerpo de la tabla 

Este proceso asegura que todos los 
pedidos se muestren correctamente en la tabla, reflejando el estado actual de los datos 
obtenidos del servidor. La línea de código : 
limpia el contenido actual del cuerpo de la tabla de pedidos, asegurando que la tabla se 
actualice correctamente sin duplicar los datos existentes. El método itera sobre 
cada elemento del array de pedidos, ejecutando una función para cada elemento. En este 
caso, se utiliza para crear y afiadir una nueva fila en la tabla para cada pedido. Las 
plantillas literales son una forma de incluir expresiones dentro de cadenas de texto 
utilizando la sintaxis . En esta función, se utilizan para insertar 
dinámicamente los valores de las propiedades de cada pedido en las celdas de la fila de 
la tabla. 


Función para obtener todos los datos de la base de datos y filtrar por dni 


const expr 
const route 
const JefeArea = 


router. get » async (req, res) 
const f dni, numero pedido + 
let whereClause = (J; 


if (dni) £ 
| whereClause.dni registrador 


console. log 


if (numero pedido) ( 
whereClause.numero pedido = numero pedido; 
console. log $(numero pedido) 


, 


try € 
const datos = await JefeArea.findaAll(( where: whereClause 1); 
res. json(datos); 
) catch (error) ( 
console.error 
res. status 
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La ruta router.get("/") define un manejador para las solicitudes GET a la ruta raíz. Esta 
función asíncrona se encarga de obtener datos del modelo JefeArea según los 
parâmetros de consulta (dni y numero pedido) que se envían en la solicitud. 
Primero, se inicializa un objeto whereClause vacío que se usará para construir la 
cláusula WHERE de la consulta. Si se proporciona un dni, se afiade al objeto 
whereClause y se imprime un mensaje en la consola indicando que se está filtrando 
por ese DNI. De manera similar, si se proporciona un numero pedido, también se 


afiade al objeto whereClause y se imprime un mensaje en la consola. 


La función utiliza await para esperar a que el modelo JefeArea busque todos los 
registros que coincidan con la cláusula WHERE construida (whereClause). Si la 
búsqueda es exitosa, los datos obtenidos se envían como respuesta en formato JSON. Si 
ocurre un error durante el proceso de obtención de datos, se captura en el bloque catch, 
se imprime un mensaje de error en la consola, y se responde con un código de estado 500 


y un mensaje de error indicando que hubo un problema al obtener los datos. 


Tabla de la base de datos de los 328tems aceptados por el jefe 


ENGINE=InnoDB CHARSET=utf8mb4 =utf8mb4 general ci; 


La tabla jefe area almacena información detallada de los pedidos supervisados por el 
jefe de área. Incluye un id como clave primaria, descripcion. item para la descripción del 
ítem, cantidad para la cantidad de ítems, precio como decimal, dni registrador para el 
DNI del registrador, numero pedido para el número del pedido, createdAt y updatedAt 
como marcas de tiempo automáticas, y dni jefe para el DNI del jefe. Todos los campos 
son obligatorios y la tabla utiliza el motor InnoDB con el conjunto de caracteres UTF-8 


para asegurar compatibilidad internacional y manejo eficiente de datos. 
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> Funciones del área de administración 


AREA DE ADMINISTRACION 


Aprobar Usuarios 


Monitoreo de Solicitudes 


Gestión de Usuarios 


Gestión de Inventario 


Generar Reportes 


Cerrar sesión 


El archivo administracion.ejs define la estructura HTML de la página de 
administración, la cual incluye un encabezado fijo, una barra lateral de navegación y una 
sección de contenido principal. El encabezado (<header class="header">) tiene un 
disefio flexible y fijo en la parte superior de la página, con un título centrado que indica 
"Panel de Administración". La barra lateral (<aside class="sidebar">) contiene el 
perfil del administrador y botones de navegación para acceder a diferentes secciones, 
como "Perfil" y "Aprobar Usuarios”. El contenido principal (<main class="main- 
content'">) se divide en secciones que se muestran u ocultan según la navegación del 


usuario. 


Función de los eventos 


El primer bloque de código utiliza document.addEventListener con el evento 


DOMContentLoaded para asegurar que la función anónima que contiene el resto del 
código solo se ejecute una vez que todo el contenido del DOM haya sido completamente 
cargado y parseado. Esto es crucial para garantizar que todos los elementos del DOM a 


los que el código hace referencia estén disponibles cuando se intenta acceder a ellos. 
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Dentro de esta función anónima, se declaran varias constantes que se refieren a 
elementos específicos del DOM usando document.getElementById. Estas 
constantes son  searchUser,  selectDNI,  selectNombre, selectApellido, 
selectNumeroPedido y tablaDatos. Cada una de estas constantes se asocia con un 
elemento HTML específico en la página, como campos de entrada o selectores 
(comboboxes), y la tabla donde se mostrarán los datos. Por ejemplo, searchUser se 
refiere al campo de entrada donde los usuarios pueden escribir para buscar otros 
usuarios, y tablaDatos se refiere al cuerpo de la tabla donde se mostrarán los resultados 


de las búsquedas y otras operaciones. 


El segundo bloque de código asigna manejadores de eventos a estos elementos utilizando 
el método addEventListener. Para searchUser, se agrega un evento input que Ilama 
a la función buscarUsuarios cada vez que el usuario escribe en el campo de búsqueda. 
Esto permite que la búsqueda de usuarios se realice en tiempo real a medida que el 


usuario escribe. 


Para los selectores selectNombre y selectApellido, se agrega un evento change que llama 
a la función sincronizarComboboxes cada vez que el usuario cambia la selección en estos 
combobox. Esto asegura que los combobox se mantengan sincronizados, mostrando 


opciones consistentes y actualizadas. 


Finalmente, para selectNumeroPedido, se agrega un evento change que llama a la 
función cargarDatosPorNumeroPedido cada vez que el usuario selecciona un número de 
pedido diferente. Esto permite que los datos correspondientes al número de pedido 


seleccionado se carguen y se muestren en la tabla. 


Buscador de usuarios para cargar en el combobox 


Es una función asíncrona que maneja la búsqueda de usuarios en tiempo real. Primero, 
obtiene el valor del campo de búsqueda searchUser y lo almacena en la constante 
query. Si el campo de búsqueda está vacío (query === "", llama a la función 
cargarDatos() para cargar todos los datos disponibles sin ningún filtro. La función 
cargarDatos se encarga de obtener y mostrar todos los registros en la tabla, lo que es 


útil cuando no se ha ingresado ningún término de búsqueda específico. 
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Si el campo de búsqueda no está vacio, la función realiza una solicitud HTTP a la API 
utilizando fetch, pasando el valor de query como parámetro de búsqueda en la URL 
(/api/usuarios?search=$(query3). La palabra clave await se utiliza para esperar a 
que la promesa de fetch se resuelva, lo que significa que el código se detendrá en esta 
línea hasta que la solicitud HTTP se complete. Una vez que se obtiene la respuesta, se 
convierte a formato JSON usando response.json(), lo que también es una operación 
asíncrona que requiere await. Los datos obtenidos, que representan los usuarios que 
coinciden con el término de búsqueda, se pasan a la función para actualizar el combobox 


con los resultados de la búsqueda. 


Actualizar los combobox 


La función se encarga de actualizar los elementos comboboxes (select) con los datos 
de los usuarios obtenidos de la búsqueda. Primero, llama a la función 
limpiarComboboxes para vaciar los combobox actuales y asegurarse de que no haya 
datos previos. Luego, utiliza el método forEach para iterar sobre cada objeto de usuario 


en el array usuarios. 


Dentro del forEach, se crean nuevas opciones (optionDNI, optionNombre y 
optionApellido) para cada usuario utilizando el constructor new Option. Este 
constructor toma dos argumentos: el texto que se mostrará en la opción y el valor de la 
opción. En el caso de optionDNI, ambos argumentos son el DNI del usuario. Para 
optionNombre, el texto mostrado es el nombre completo del usuario (nombre y 
apellido) y el valor es el DNI. optionApellido usa el apellido del usuario como texto y 


el DNI como valor. 


Después de crear estas opciones, se afiaden a los respectivos combobox (selectDNI, 


selectNombre y selectApellido) utilizando el método add. 


Finalmente, la función lama a cargarNumeroPedidos para cargar los números de pedido 


únicos asociados al primer usuario en la lista y cargarDatos para cargar todos los datos 
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disponibles en la tabla. Esto asegura que los comboboxes se Ilenen con los datos más 


recientes y que la tabla de datos se actualice para reflejar cualquier cambio. 


Cargar los números de las solicitudes según el dni 


async function cargarNume 


const dni = selectDNI.value; 


console. log(" DNI selecci 


try 
const response = await fetch(' /api/jef a?dni=$(dniy'); 
const datos = await response. json(); 


console. log( 'Dato ecibido » datos); 


const numerosPedidoUnicos = [...new Set(datos.map(dato => dato.numero pedido))]; 
console. log( eros de pedid nico > numerosPedidoUnicos); 


limpiar ox(selectNumeroPedido) ; 
numerosPedidoUnicos .forEach (numero 


const optionNumeroPedido = new ion(numero, numero); 
selectNumeroPedido. add (optionNumeroPedido); 


> 


catch (error 
console.error( » error); 


Es una función asíncrona que se encarga de cargar y mostrar los números de pedido 
únicos asociados a un DNI seleccionado. Primero, obtiene el valor del combobox 
selectDNI y lo almacena en la constante dni, mostrando este valor en la consola para 


verificar cuál DNIT ha sido seleccionado. 


Dentro de un bloque try, la función realiza una solicitud HTTP a la API utilizando ; 
pasando el valor del DNI como parámetro en la URL 

La palabra clave se utiliza para esperar a que la promesa de se resuelva y 
para convertir la respuesta a formato JSON, almacenando los datos recibidos en la 


constante datos. Estos datos se muestran en la consola para verificar su contenido. 


La función luego crea un array de números de pedido únicos usando new Set para 
eliminar duplicados y para extraer los números de pedido de los datos recibidos. 
Este array se almacena en la constante numerosPedidoUnicos y se muestra en la consola 


para verificar que los números de pedido únicos se han extraído correctamente. 


Después de esto, la función Ilama a limpiarCombobox para vaciar el combobox 
selectNumeroPedido antes de afiadir las nuevas opciones. Luego, utiliza para 


iterar sobre cada número de pedido único y crea una nueva opción 
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(optionNumeroPedido) para cada número utilizando el constructor new Option. 


Estas opciones se afiaden al combobox selectNumeroPedido. 


Para verificar que las opciones se han afiadido correctamente, la función muestra en la 
consola los valores de todas las opciones actuales del combobox. Finalmente, Ilama a 
cargarDatos pasando el DNI seleccionado para cargar los datos correspondientes en la 
tabla. 


Si ocurre un error en cualquier parte del proceso, se captura en el bloque catch y se 
muestra un mensaje de error en la consola, asegurando que cualquier problema durante 


la carga de los números de pedido se registre para su posterior depuración. 


En la siguiente imagen se muestra los resultados que se muestran 


AREA DE ADMINISTRACION 


Aprobar Usuarios 


carlos 71302561 ” CARLOS GUILLERMO GOMEZ AGUIRRE v 


GOMEZ AGUIRRE v “ v 


Función para cargar datos a la tabla 


n cargarDatos(dni = null) ( 
let query = pi r ; 


(dni) f 
query += 
response = fetch(query); 
t datos = response. json(); 
console. log('Datos para cargar en la tabla:', datos); 
tablaDatos.innerHTML = '*; 
datos.forEach(dato => 
nst row = document.createElement('tr'); 


row.dataset.id = dato.id; // 
row. innerHTML = 


td>$(dato.descripcion item)</td 
I>$(dato.cantidad) 
td>$(dato.precio) 
(dato.dni registrador)</td 
d>$(dato.numero pedido)< 
d>$(dato.dni jefe) 


tablaDatos.appendChild(row); 
); 


Es una función que se encarga de cargar y mostrar datos en una tabla, opcionalmente 


filtrados por DNI. La función toma un parámetro opcional dni, que por defecto es null. 
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Primero, construye la URL de consulta (query) para la solicitud HTTP, que inicialmente 
es /api/jefe area. Si se proporciona un dni, se agrega como parámetro de consulta a 
la URL (query += ?dni=$(dni)'). 


Luego, la función realiza una solicitud HTTP a la API utilizando fetch, pasando la URL 
de consulta como argumento. La palabra clave await se utiliza para esperar a que la 
promesa de fetch se resuelva y para convertir la respuesta a formato JSON, 
almacenando los datos recibidos en la constante datos. Estos datos se muestran en la 


consola para verificar su contenido. 


La función vacía el contenido actual de la tabla (tablaDatos.innerHTML = "9 para 
asegurarse de que no haya datos previos antes de afiadir los nuevos datos. Utiliza el 


método forEach para iterar sobre cada objeto de dato en el array datos. 


Dentro del forEach, se crea una nueva fila de tabla (row) utilizando 
document.createElement('tr”. Se asigna el ID del registro al atributo data-id de la 
fila (row.dataset.id = dato.id). Luego, se construye el contenido HTML de la fila 
(row.innerHTML) utilizando los valores de cada campo en el objeto dato y se afiade 
la fila a la tabla (tablaDatos.appendChild(row)). 


La tabla para mostrar los datos quedaría de la siguiente manera. 


- E; AREA DE ADMINISTRACION 


CELSO GOMEZ CAJAS 


carlos 71302561 v CARLOS GUILLERMO GOMEZ AGUIRRE v 


GOMEZ AGUIRRE ” | 1 q 
Aceptar Solicitud 
Es patas Dare Sos nas 
2 5.00 “ 


Aprobar Usuarios galleta 71302561 73268144 


caramelos 2 4.00 71302561 1 73268144 


Monitoreo de Solicitudes 


celular 2 1300.00 71302561 1 73268144 


Gestión de Usuarios agua cielo 2 2.00 71302561 11 73268144 
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Función para aceptar las solicitudes 


async function aceptarSolicitud() 1 


if (!tablaDatos. que ctoralI( ). length 
alert( | 
return; 


)5 


const usuario = JSON.parse(localStorage.getItem( ': DF 
const dniAdministrador = usuario ? usuario.dni : null; 


const datos = [...tablaDatos.querySe "All )].map(row => ( 
const cells = row.querySel 
return ( 
descripcion item: cells[0].innerText, 
cantidad: cells[1].innerText, 
precio: cells[2].innerText, 


dni registrador: cells[3].innerText, 
numero pedido: cells[4].innerText, 
dni jefe: cells[5].innerText, 

dni administrador: dniAdministrador 


const response = await fetch 
method: ST", 
headers: 


| 


> 


body: JSON.string 


if (response.ok) ( 
alert( 
await eliminarSolicitudesPorNu ido(datos.map(dato => dato.numero pedido)); 
cargarDatos(); 


limpiarc boxes(); 
searchUser.value = 
4 
+ else ( 
alert( 


catch (error 
console. 


alert( 


n EE 
Es una función asíncrona que maneja el proceso de aceptación de solicitudes y 


actualización de la tabla de datos. Primero, verifica si la tabla tiene datos utilizando 
. Sila tabla está vacía, muestra una alerta 


y sale de la función 


Luego, obtiene los datos del usuario administrador desde y los almacena 


en el constante usuario. Si usuario existe, extrae el dni y lo guarda en dniAdministrador. 
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La función recopila los datos de todas las filas de la tabla usando querySelectorAIl 
para seleccionar todas las filas (tr). Utiliza el método map para crear un array de objetos 
con los datos necesarios, extrayendo los valores de cada celda (td) de cada fila. Para cada 
fila, crea un objeto con las propiedades descripcion item, cantidad, precio, 
dni registrador, numero pedido y dni jefe. También afiade dni administrador, que es 


el dni del administrador que está aceptando la solicitud. 


Dentro del bloque try, la función realiza una solicitud HTTP POST a la API en la ruta 
/api/aprobacion solicitud. La solicitud incluye un encabezado Content-Type que 
especifica que el contenido de la solicitud es JSON, y el cuerpo de la solicitud contiene 
los datos convertidos a formato JSON usando JSON.stringify(datos). La palabra 


clave await se utiliza para esperar a que la promesa de fetch se resuelva. 


Si la solicitud se realiza con éxito (response.ok), muestra una alerta indicando que la 
solicitud ha sido aceptada. Luego, lama a eliminarSolicitudesPorNumeroPedido para 
eliminar los registros aceptados, pasando los números de pedido como argumento. La 
función cargarDatos se llama para recargar la tabla con los datos actualizados. También 


se limpian los comboboxes y el campo de búsqueda. 


Si la solicitud falla, muestra una alerta indicando que hubo un error al aceptar la 
solicitud. Cualquier error que ocurra dentro del bloque try se captura en el bloque catch, 
y se registra en la consola, mostrando una alerta adicional para informar al usuario del 


error. 


Función para eliminar solicitudes por número de boleta 


CAPÍTULO VI: Caso Práctico (Empresa de Turismo PATA AMARILLA) | 337 


La función se encarga de eliminar solicitudes específicas basadas en sus números de 
pedido. Primero, verifica si la tabla tiene datos utilizando 
tablaDatos.querySelectorAlI('tr").length. Sila tabla está vacía, registra un mensaje 
en la consola (console.log('La tabla está vacíia. No se ejecutará la 


eliminación.) y sale de la función con return. 


Dentro de un bloque try, la función realiza una solicitud HTTP DELETE a la API en la 
ruta /api/jefe area. La solicitud incluye un encabezado Content-Type que 
especifica que el contenido de la solicitud es JSON, y el cuerpo de la solicitud contiene 
los números de pedido convertidos a formato JSON usando JSON.stringify(1 
numerosPedido J). La palabra clave await se utiliza para esperar a que la promesa de 


fetch se resuelva. 


Si la solicitud se realiza con éxito (response.ok), muestra una alerta indicando que las 
solicitudes han sido eliminadas y Ilama a la funcion para recargar la tabla con los datos 
actualizados. Esto asegura que la interfaz de usuario se actualice para reflejar los cambios 
realizados. Si la solicitud falla, muestra una alerta indicando que hubo un error al 


eliminar las solicitudes. 


Cualquier error que ocurra dentro del bloque try se captura en el bloque catch, y se 
registra en la consola (console.error('Error al eliminar las solicitudes:', error)) 


y se muestra una alerta adicional para informar al usuario del error. 


La base de datos donde se almacenan los datos luego de ser aceptados 


ENGINE=InnoDB 


Esta es la base de datos donde se registra todos los bienes y suministros que son 
aceptados por administracio y para ello es importante todos los datos que se están 


mostrando en la tabla. 
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> Funciones del área de logística 


AREA LOGISTICA 


Con los códigos de CSS y HTML se formó lo que se observa y en el código se incluye varios 
elementos importantes como el encabezado, la barra lateral de navegación y la sección 


principal de contenido. 


Encabezado: El encabezado (<header class="header">) es fijo y se encuentra en la 
parte superior de la página. Incluye un título centrado y dos secciones para íconos y 


botones de navegación, ubicadas a la izquierda y a la derecha. 


Barra Lateral: La barra lateral (<aside class="sidebar">) contiene el perfil del 
usuario y botones de navegación para acceder a diferentes secciones de la página de 
logística. Los botones de navegación permiten a los usuarios moverse entre las diferentes 


secciones, como "Ordenes de Compra" y "Solicitudes”. 


Contenido Principal: La sección principal (<main class="main-content">) está 
disefiada para mostrar el contenido específico seleccionado por el usuario, como las 
órdenes de compra o las solicitudes. Las diferentes secciones de contenido se muestran 


u ocultan según la navegación del usuario. 


Funciones para que se ejecuten automáticamente 


La función encapsulada por document.addEventListener 
(DOMContentLoaded',() => 1...) se asegura de que todo el código dentro de ella 


se ejecute solo después de que el DOM se haya cargado completamente. Esto es 
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importante para asegurar que todos los elementos del DOM a los que el código hace 


referencia estén disponibles. 


Primero, se selecciona el elemento del DOM con el ID buscador y se asigna a la constante 
buscador. Este elemento es probablemente un campo de entrada donde el usuario puede 
escribir texto para buscar solicitudes. Luego, se selecciona el elemento del DOM con el 
ID selectDNI y se asigna a la constante selectDNI, que es un combobox (select) donde 


el usuario puede seleccionar un DNI específico. 


Asimismo, se selecciona el elemento del DOM con el ID selectNumeroPedido y se asigna 
a la constante selectNumeroPedido, que es otro combobox donde el usuario puede 
seleccionar un número de pedido específico. A continuación, se selecciona el elemento 
del DOM con el ID tablaSolicitudes y luego se selecciona su elemento tbody, asignándolo 
a la constante tablaSolicitudes. Este tbody es donde se afiadirán las filas de datos de las 
solicitudes. Finalmente, se selecciona el elemento del DOM con el ID aceptarCompra y 
se asigna a la constante aceptarCompra, que es probablemente un botón que, cuando se 


hace clic, acepta las compras seleccionadas. 


Funciones para cargar toda la interfaz gráfica que se nuestra en pantalla 


Se encarga de obtener las solicitudes de logística desde una API. La función acepta un 
parámetro opcional query, que se utiliza para filtrar las solicitudes basadas en una 
consulta específica. El valor por defecto de query es una cadena vacía ('), lo que 


significa que, si no se proporciona ningún valor, se utilizará una consulta vacía. 


Dentro de la función, se realiza una solicitud HTTP a la API utilizando fetch, pasando la 
URL de la API junto con el parámetro de consulta query. La palabra clave await se 
utiliza para esperar a que la promesa de fetch se resuelva, es decir, hasta que se obtenga 


una respuesta del servidor. La respuesta se almacena en la constante response. 


Después de recibir la respuesta, se utiliza response.json() para convertir la respuesta 
a formato JSON. La palabra clave await se usa nuevamente para esperar a que esta 


operación se complete. El resultado de esta conversión se almacena en la constante data. 


Finalmente, la función devuelve los datos obtenidos (data). Esto permite que cualquier 
parte del código que llame a fetchSolicitudes pueda acceder a las solicitudes de 
logística obtenidas desde la API. 
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ction upd ct 
const solicitudes t fet es(query); 
selectDNI.innerHTML = 1 á 
onst dniUnicos = [...new Set(solicitudes.map(solicitud => solicitud.dni registrador))]; 
dniUnicos.forEach(dni 


const option = document.c Element ( de 
option.value = dni; 

option.textContent = dni; 
selectDNI.appendChild(option); 


Se encarga de actualizar el combobox (select) que permite seleccionar un DNI en la 
interfaz de usuario. La función acepta un parámetro opcional query, que se utiliza para 
filtrar las solicitudes basadas en una consulta específica. El valor por defecto de query es 


una cadena vacía ("). 


Primero, la función llama a fetchSolicitudes(query) para obtener las solicitudes 
desde la APJI, utilizando el valor de query para filtrar los resultados. La palabra clave 
await se utiliza para esperar a que la promesa de fetchSolicitudes se resuelva y 


devuelva los datos. Estos datos se almacenan en la constante solicitudes. 


Luego, la función establece el contenido HTML del combobox selectDNI con una 
opción por defecto que dice "Seleccionar DNT". Esto asegura que el combobox se reinicie 


y contenga una opción predeterminada. 


A continuación, la función crea un array de los dni únicos utilizando new Set y map. 
solicitudes.map(solicitud => solicitud.dni registrador) creaun array con todos 
los dni de los registradores en las solicitudes. new Set se utiliza para eliminar duplicados, 


y elresultado se convierte nuevamente en un array utilizando el operador de propagación 


Easad: 


Después, la función utiliza forEach para iterar sobre cada DNI único en el array 
dniUnicos. Para cada DNI, se crea un nuevo elemento opción utilizando 
document.createElement('option”. El valor (value) y el contenido de texto 
(textContent) de cada opción se establecen en el DNI actual. Finalmente, cada opción 


se afiade al combobox selectDNI utilizando selectDNI.appendChild(option). 


onst solicitudes it icitudes(dni); 
selectNumeroPedido. innerHT pti al Seleccio : de Pedi io - 
onst numerosPedidoUnicos = [...new Set(solicitudes.map(solicitud => solicitud.numero pedido))]; 
numerosPedidoUnicos.forEach(numero 
t option = document.crea ment( 


option.value = numero; 
option.textContent = numero; 
selectNumeroPedido.appendChild(option); 
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La función se encarga de actualizar el combobox de números de pedido en la interfaz de 
usuario utilizando un DNI específico para filtrar las solicitudes. Cuando se proporciona 
un DNI, la función obtiene las solicitudes relacionadas mediante una llamada a la API y 


actualiza las opciones del combobox para reflejar solo los números de pedido relevantes. 


Primero, la función llama a fetchSolicitudes(dni), que recupera las solicitudes de la 
API y devuelve los datos en formato JSON. Usando await, la función espera a que esta 


operación se complete y almacena los datos recibidos en la constante solicitudes. 


Luego, la función reinicia el combobox de números de pedido estableciendo una opción 
predeterminada que dice "Seleccionar Número de Pedido". Esto limpia cualquier 


opción previa en el combobox. 


Para asegurar que solo se muestren números de pedido únicos, la función utiliza new 
Set junto con map para extraer los números de pedido de las solicitudes y eliminar 


duplicados. El resultado es una lista de números de pedido únicos. 


La función itera sobre cada número de pedido único utilizando forEach. Para cada 


número, crea un nuevo elemento opción, establece su valor y su contenido de texto con 


el número de pedido correspondiente, y luego lo afiade al combobox. 


La función updateTable es una función asíncrona que se encarga de actualizar la tabla 
de solicitudes en la interfaz de usuario, filtrando los datos según los parámetros 


opcionales query, dni, y numeroPedido. 


Primero, la función llama a fetchSolicitudes(query) para obtener las solicitudes 
desde la API. Utilizando await, se asegura de esperar a que la promesa se resuelva y 


devuelva los datos, que se almacenan en la constante solicitudes. 


CAPÍTULO Vl: Caso Práctico (Empresa de Turismo PATA AMARILLA) | 342 


Luego, la función filtra las solicitudes utilizando el método filter. Este método crea un 
nuevo array, filteredSolicitudes, que solo incluye las solicitudes que cumplen con los 
criterios especificados: si dni es una cadena vacía o coincide con el dni registrador de la 
solicitud, y si numeroPedido es una cadena vacía o coincide con el numero pedido de la 


solicitud. 


La función entonces vacía el contenido actual del cuerpo de la tabla de solicitudes 
estableciendo tablaSolicitudes.inner HTML a una cadena vacía. Esto asegura que 


cualquier contenido anterior en la tabla se elimine antes de afiadir nuevas filas. 


A continuación, la función itera sobre cada solicitud en filteredSolicitudes utilizando 
forEach. Para cada solicitud, crea un nuevo elemento de fila (tr) con 
document.createElement('tr”) y construye el contenido HTML de la fila utilizando 
las propiedades de la solicitud. El contenido de la fila incluye varias celdas (td) que 
muestran el ID, el DNI del registrador, el número de pedido, la descripción del ítem, la 
cantidad, el precio, el DNI del administrador y la fecha de creación formateada. La fecha 
de creación se formatea utilizando new 


Date(solicitud.createdAt).toLocaleString() si está disponible. 


Finalmente, la nueva fila se afiade al cuerpo de la tabla (tablaSolicitudes) utilizando 


appendChild(row). 


Los datos de toda la tabla se muestran en la siguiente imagen. 


63 Solicitudes 


71302561 v Aceptar Compra 


ID  DNiRegistrador Número Pedido Descripciónitem Cantidad Precio  DNI Administrador Fecha Creación 


5.00 71305795 19/7/2024, 8:21:29 p.m 


71302561 10 


221 galleta 


4.00 71305795 19/7/2024, 8:21:29 p. m 


228 | 11302561 10 caramelos 


10 celular 1300.00 | 71305795 19/7/2024, 8:21:29 p.m 


71302561 


22 


9 


2.00 71305795 


19/7/2024, 8:21:29 p.m 


71302561 10 


230 agua cielo 
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Esta función es para verificar el stock y aceptar la solicitud 


aceptarCompra.addEventListener( » async 
const solicitudes = -tablaSolicitudes.q All('tr')].map(row => ( 
const cells = row SelectorAll 
return 
id: cells[0].textContent, 
dni registrador: cells[1].textContent, 
numero pedido: cells[2].textContent, 
descripcion item: cells[3].textContent, 
cantidad: pa t(cells[4].textContent), 
precio: pa loat(cells[5].textContent), 
dni administrador: cells[6].textContent 


D; 


if (solicitudes.length === 0) ( 


alert 
return; 
1 
J 


try H 
const response = await fetch( 


method: » 
headers: ( 


1 

J> 

body: JSON.stringify(solicitudes) 
)s 


if (!response.ok) ( 
const errorText = await response.tex 
throw new Error(errorText); 


const result = await response.json(); 
if (result.success) ( 
i onfirm('Tienes los i s necesario 
const actualizarResponse = await fetch( 
method: = 
headers: 


> 


body: JSON.stringify(solicitudes 
D; 


if (lactualizarResponse.ok) 
const errorText = await actualizarResponse.text(); 
throw new Error(errorText); 
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+ result.faltantes. join 


El código proporcionado maneja el evento de clic en el botón aceptar Compra y realiza 


una serie de operaciones asíncronas para procesar las solicitudes de compra. 


Cuando se hace clic en el botón aceptarCompra, se ejecuta una función asíncrona. 
Primero, esta función recopila todas las filas (<tr>) de la tabla de solicitudes 
(tablaSolicitudes) y mapea cada fila para extraer sus celdas (<td>). Utilizando 
querySelectorAlI('tr"), se seleccionan todas las filas, y con map, se itera sobre cada 
fila para construir un objeto que representa una solicitud. Este objeto contiene los valores 
de texto (textContent) de las celdas correspondientes a los atributos id, 
dni registrador, numero pedido,  descripcion item,  cantidad, precio y 
dni administrador. Las cantidades y precios se convierten a números usando parseInt 


y parseFloat, respectivamente. 


Si no hay solicitudes en la tabla (es decir, la longitud de solicitudes es 0), se muestra una 


alerta indicando "No hay solicitudes para procesar”" y la función termina con return. 


Luego, la función intenta enviar las solicitudes al servidor para verificar si los ítems 
necesarios están disponibles. Esto se hace mediante una solicitud POST a la ruta 
/api/logistica/verificar items, pasando las solicitudes en el cuerpo de la solicitud 
formateadas como JSON (JSON stringify(solicitudes)). Se utilizan await y fetch para 
esperar la respuesta del servidor. Si la respuesta no es exitosa (!response.ok), se 


obtiene el texto del error de la respuesta y se lanza una excepción con ese mensaje. 


Si la verificación es exitosa y el servidor indica que los ítems están disponibles 
(result.success), se muestra una confirmación al usuario preguntando si desea aceptar 
o cancelar. Si el usuario acepta, se envia otra solicitud POST a la ruta 
/api/logistica/actualizar items para actualizar los ítems, pasando las solicitudes 


nuevamente en el cuerpo de la solicitud. Si la actualización es exitosa 
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(actualizar Result.success), se muestra una alerta indicando que la compra se realizó 
con éxito y se Ilama a updateTable() para recargar la tabla. Si hay un error en la 


actualización, se muestra una alerta indicando "Error al realizar la compra”. 


Si la verificación inicial del servidor indica que faltan ítems (result.success es false), 


se muestra una alerta listando los ítems faltantes. 


En el caso de que ocurra cualquier error durante estas operaciones, se captura en el 
bloque catch y se muestra una alerta con el mensaje de error, además de registrar el error 


en la consola para depuración. 


Este código maneja de manera completa y eficiente el proceso de verificación y 
actualización de solicitudes de compra, asegurando que los usuarios sean notificados 
adecuadamente de cualquier problema o éxito en el proceso. Utiliza varias técnicas 
importantes como async, await, fetch, map, y manejo de eventos, proporcionando 


una interacción de usuario fluida y robusta. 


Funciones para la conexión con la base de datos de logística 


El código mostrado define una ruta en un servidor Express para manejar solicitudes GET 
a /aprobaciones. Esta ruta está disefada para obtener todas las aprobaciones de 


solicitudes almacenadas en la base de datos y devolverlas en formato JSON. 


Primero, se importan las dependencias necesarias utilizando require. Se importa 
Express y se crea un router con express.Router(). Luego, se importan sequelize 
para manejar la conexión a la base de datos y los modelos AprobacionSolicitud, 


Historial, e Item que representan diferentes tablas en la base de datos. 


La ruta para obtener aprobaciones de solicitudes se define con 
router.get('/aprobaciones', async (req, res) => 1... J). Aquí se utiliza la palabra 


clave async para indicar que la función es asíncrona y podrá usar await dentro de ella. 
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Dentro de la función, se utiliza un bloque try-catch para manejar posibles errores 
durante la operación. En el bloque try, se lama a AprobacionSolicitud.findANO, 
que es un método de Sequelize para obtener todos los registros de la tabla 
AprobacionSolicitud. La palabra clave await se utiliza para esperar a que la promesa 
de findAll se resuelva y devuelva los datos. Estos datos se almacenan en la constante 


aprobaciones. 


Luego, los datos obtenidos se envían como respuesta en formato JSON utilizando 
res.json(aprobaciones). Si ocurre un error durante la operación, el bloque catch 
captura el error y responde con un código de estado 500 y un mensaje de error en formato 
JSON (res.status(500).json(Y error: error.message ))). Esto asegura que 
cualquier problema durante la operación sea manejado adecuadamente y comunicado al 


cliente. 


Tabla de la base de datos para que las solicitudes queden archivados 


ENGINE=InnoDB CHARSET=utf8mb4 =utf8mb4 general ci; 


Generación de la orden de compra 


III 


AREA LOGISTICA 


Órdenes de Compra 


REGIÓN: 


[ Amazonas +] 


PROVINCIA: 


| 


DISTRITO: 


DIRECCIÓN: 


Generar Orden de Compra 
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async function fe 
const response = await 
return response. j 


async function fetchProvincias(regionId) 1 
const response = await fetch fregionId" ); 
return response. 


async function fetc i 
const response = await h E - s/$fprovinciaId) 
return response. json(); 


async function fetchProductos(query = "91 
const url = j query ? =$ (query) 
const response = await fetch(url); 
return response. json(); 


function r ions(selectElement, options) ( 
selectElement.innerHTML = ""; 
options.forEach(option => « 
const opt = document.( nt( 


opt.value = option.id; 
opt.textContent = option 
selectElement. appendChild(opt); 


selectElement.disabled = options.length === 0; 


async function updateProvincias() f 
const regionId = regionSelect.value; 
if (regionId 

const provincias = await f 
renderOptions(provinciaSel 
distritoSelect.innerHTML = ''; 
distritoSelect.disabled = true; 


async function up O 1 
const provinciaId = provinciaSelect.value; 
if (provinciaId 
const distritos = await fetchDistritos(provinciald); 
rende tions(distritoSelect, distritos); 
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function rende s 
tablaProductos.innerHTML = 
ch(producto => 
const row = document. createElement( 25 
row. innerHTML = 
$(producto. id) 
$/producto. nombre) 
$(producto. categoria) 
$fproducto.precio) 
d>$fproducto.cantidad) 


$(producto.unidad de medida) 
$fproducto.dni proveedor) 


: $fproducto. id) 
$fproducto.nombre!', $fproducto.precio), '$fproducto.dni proveedor) 


> 


tablaProductos .appendChild(row) ; 


Las funciones proporcionadas son responsables de manejar la obtención y renderización 
de datos relacionados con regiones, provincias, distritos y productos en una interfaz de 
usuario. Aquí está la explicación detallada de cómo funcionan cada una de estas 


funciones y los conceptos clave que utilizan. 


Primero, las funciones 


son funciones asíncronas que realizan solicitudes a la API 
utilizando para obtener datos en formato JSON. La palabra clave se usa 
para esperar a que la promesa de se resuelva antes de continuar con la ejecución 


del código. Esto asegura que los datos se obtengan correctamente antes de 
es una API nativa de que permite hacer solicitudes 
convierte la respuesta HTTP en un objeto JavaScript, lo que facilita el 


manejo de los datos. 


La función se encarga de poblar un elemento con opciones. 
Primero, limpia el contenido previo del elemento select 
. Luego, itera sobre las opciones recibidas, crea un nuevo elemento para 
cada una , establece sus valores 
» y los afiade al select 
. También deshabilita el si no hay 


opciones disponibles 


Las funciones y se utilizan para actualizar los 
selectores de provincias y distritos cuando el usuario selecciona una región o provincia, 
respectivamente. obtiene el ID de la región seleccionada 


Si hay un ID válido, llama a para 
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obtener las provincias correspondientes, luego usa para actualizar el 
y limpia el . De manera similar, 
obtiene el ID de la provincia seleccionada, Ilama a , y usa 


para actualizar el 


Finalmente, la función se encarga de mostrar los productos en una 
Primero, limpia el contenido de la tabla 
. Luego, itera sobre los productos, creando 
para cada producto. Cada fila contiene con los detalles del 
producto | y un  botón para seleccionar el producto 


. Estas filas se afiaden al cuerpo de la tabla 


Realizar la lista de bienes y servicios para generar la orden de compra 


function renderCa 
let carritoHTML = 


> 


carrito.forEach(producto => £ 
carritoHTML += 


fproducto. id) 
$fproducto.nombre) 


fproducto.precio) 
fproducto.cantidad) 
$fproducto.dni proveedor) 


$(producto. id) 
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ML +=" 
</tbody> 
</table> 


> 


- 800) / 


PA 

680) / 2; 

y i-open("”, “Carrito de Compras”, "width=800,height=600,top=$(top+, left=$(left)") 
nt.write( 


<html> 
<head> 
<title>Carrito de Compras</title> 
<style> 
body 4 font-family: Arial, sans-serif; text-align: center; + 
table ( width: 100%; border-collapse: collapse; margin-top: 20px; > 
th, td ( border: 1px solid $9000; padding: 8px; text-align: left; > 
th 1 background-color: &f2f2f2; > 
button f background-color: red; color: white; border: none; padding: 5Spx 10px; cursor: pointer; 
button:hover ( background-color: darkred; > 
</style> 
</head> 
<body> 
<hi>Carrito de Compras</h1> 
fcarr TML + 
<button onclick="window.close()">Cerrar</button> 
</body> 
</html> 


ocument.close(); 


La función renderCarrito se encarga de mostrar el contenido del carrito de compras 
en una nueva ventana emergente. Este proceso se realiza en varias etapas clave. Primero, 
la función construye el HTML necesario para una tabla que contendrá los productos del 
carrito. Utiliza una plantilla de cadena (template string) para definir la estructura 
básica de la tabla, incluyendo el encabezado de la tabla con columnas para ID, Nombre, 


Precio, Cantidad, DNI del Proveedor y una columna para las acciones disponibles. 


Dentro de la función, se itera sobre cada producto en el carrito utilizando el método 
forEach. Para cada producto, se agrega una fila a la tabla. Cada fila contiene celdas que 
muestran el ID, nombre, precio, cantidad y DNI del proveedor del producto. Además, se 
incluye un botón "Eliminar" en cada fila. Este botón, al ser clicado, Ilama a la función 
eliminarProducto definida en la ventana principal (window.opener) y luego cierra 
la ventana emergente. Esto permite al usuario eliminar productos del carrito 


directamente desde la ventana emergente. 


Después de iterar sobre todos los productos, la función cierra la etiqueta del cuerpo de la 
tabla y completa la estructura de la tabla en la cadena de HTML. A continuación, la 
función calcula las posiciones para centrar la ventana emergente en la pantalla. Esto se 
logra restando el ancho y alto de la ventana emergente del ancho y alto de la pantalla, 
respectivamente, y dividiendo los resultados por dos. Estas coordenadas aseguran que la 


ventana se abra centrada. 
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La función procede a abrir una nueva ventana utilizando window.open, especificando 
las dimensiones y la posición de la ventana emergente. La nueva ventana se crea con un 
nombre ("Carrito de Compras") y se configuran sus dimensiones y posición en la pantalla 


para que esté centrada. 


Dentro de la nueva ventana, la función escribe el HTML necesario para mostrar el carrito 
de compras. Esto incluye una estructura básica de HTML con etiquetas HTML, head y 
body. En el head, se define el título de la página ("Carrito de Compras") y se incluyen 
estilos en línea para dar formato a la tabla y los botones. Los estilos aseguran que la tabla 
tenga un ancho del 100%, bordes colapsados y márgenes superiores, y que los botones 
tengan un disefio coherente y atractivo. Por ejemplo, los estilos definen que los bordes 
de las celdas sean colapsados y que el fondo de los encabezados de la tabla sea de color 
gris claro, mientras que los botones son rojos con texto blanco y cambian de color al pasar 


el cursor sobre ellos. 


En el body, se incluye un encabezado ("Carrito de Compras"), la tabla generada 
dinámicamente con los productos del carrito, y un botón "Cerrar" que permite al usuario 
cerrar la ventana emergente. La función utiliza document.write para insertar este 


HTML en la nueva ventana y luego cierra el flujo de escritura con document.close. 


Esta función crea y muestra una ventana emergente que contiene una tabla detallada de 
los productos en el carrito de compras. Utiliza técnicas de manipulación del DOM y 
gestión de ventanas emergentes para proporcionar una experiencia de usuario 
interactiva y dinámica. La función facilita la visualización y gestión del carrito de 


compras, permitiendo agregar, eliminar y revisar productos de manera eficiente. 


Conceptos importantes utilizados en la función incluyen forEach, que es un método 
utilizado para iterar sobre cada producto en el carrito, y window.opener, que es una 
referencia a la ventana principal que abrió la ventana emergente. window.open es el 
método utilizado para abrir una nueva ventana del navegador, mientras que 
document.write se usa para escribir contenido HTML en la nueva ventana y 
document.close cierra el flujo de escritura del documento. Las plantillas de cadena 
(template strings) permiten la creación de cadenas de texto complejas y multi-línea 
de manera más legible y manejable. Por último, screen.width y screen.height son 
propiedades que devuelven el ancho y alto de la pantalla del usuario, utilizadas para 


centrar la ventana emergente. 
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Seleccionar bienes y suministros para la lista que se va ordenar 


La función se encarga de agregar un producto al carrito de compras. Primero, solicita al 
usuario que ingrese la cantidad deseada del producto mediante un cuadro de diálogo. 
Este cuadro de diálogo, conocido como prompt, permite al usuario introducir un valor 
que luego se convierte a un número entero utilizando parseInt. Este método asegura 
que el valor ingresado sea tratado como un número, lo que es esencial para las 


operaciones matemáticas que siguen. 


Después de obtener la cantidad deseada, la función verifica si la cantidad ingresada es 
válida. Utiliza isNaN para comprobar si el valor no es un número. Si la cantidad es 
inválida, la función muestra una alerta indicando que la cantidad no es válida y luego 
interrumpe su ejecución mediante return. Esta validación es crucial para evitar errores 


en el procesamiento de datos no numéricos. 


A continuación, la función busca en el carrito si el producto ya existe. Utiliza el método 
find del array, que recorre el carrito buscando un producto con el mismo ID que el 
producto actual. Si encuentra un producto existente, simplemente incrementa su 
cantidad sumando la cantidad ingresada a la cantidad actual del producto en el carrito. 
Este enfoque optimiza la gestión del carrito al evitar la duplicación de productos con el 


mismo ID. 


Si el producto no existe en el carrito, la función lo agrega como un nuevo objeto. Este 
nuevo objeto contiene todas las propiedades del producto y la cantidad ingresada. Para 
ello, utiliza el método push del array, que afiade elementos al final del array. Esta 
acción asegura que el carrito mantenga una estructura coherente y actualizada con los 


productos seleccionados por el usuario. 
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Finalmente, la función actualiza el carrito almacenado en el del 
navegador. Utiliza el método de para guardar el carrito 
actualizado, convirtiéndolo primero en una cadena JSON mediante 

Este paso es importante porque solo puede almacenar cadenas de texto. 
Al convertir el carrito a una cadena JSON, se asegura que la estructura del objeto se 


preserve correctamente al guardarlo. 


Para fines de depuración, la función también registra en la consola el producto 
seleccionado. Esto es útil para los desarrolladores, ya que proporciona una forma de 


verificar que los productos se están agregando correctamente al carrito. 


Enviar la orden de compra 


async function g ar0rden 
const direccion = document. ementById('direccion').value; 
const dni cliente = 4 
const regionSelect = document 
const provinciaSelect = documen 
const distritoSelect = document .getElementBy 
const dni logistica = ] Ê 
const carrito = JSON.parse(localStorage.getItem( E RI + 


if (I!direccion || regionSelect.value === || provinciaselect.value === [|| distritoselect.value === 
alert('c ] ) 

| return; 

) 


if (carrito.length === 0) ( 
alert('El 
return; 

1 

E 


const region = regionSelect.selectedOptions[0].text; 
const provincia = provinciaSelect.selectedOptions[0].text; 
const distrito = distritoSelect.selectedOptions[0].text; 


const productos = carrito.map(item => 1 
return 
id: item.id, 
cantidad: item.cantidad 
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La función esta disefiada para crear una nueva orden de compra basada en los datos 


ingresados por el usuario y los productos almacenados en el carrito de compras. Esta 
función realiza varias tareas clave, desde la validación de los campos del formulario hasta 
el envio de una solicitud a la API para crear la orden. Primero, la función obtiene los 
valores de varios elementos del DOM, como la dirección, la región, la provincia y el 
distrito seleccionados por el usuario. Además, se definen dos valores fijos: el DNI del 
cliente y el DNI de logística. Estos valores son necesarios para identificar al cliente y al 
responsable de logística en la orden de compra. La función también recupera el 
contenido del carrito de compras desde el localStorage, convirtiéndolo de una cadena 


JSON a un objeto JavaScript utilizando JSON.parse. 


Luego, la función realiza una serie de validaciones para asegurarse de que todos los 
campos requeridos del formulario estén completos. Si alguno de los campos (dirección, 
región, provincia, distrito) está vacío, se muestra una alerta al usuario y la función se 
interrumpe utilizando return. Esta validación es esencial para garantizar que se 
proporcionen todos los datos necesarios para crear la orden. Además, la función verifica 
sielcarrito de compras está vacio. Si no hay productos en el carrito, se muestra una alerta 
indicando que el carrito está vacío y la función se interrumpe. Esto asegura que no se 


intenten generar órdenes de compra sin productos. 


Una vez que se han validado todos los campos, la función extrae los nombres de la región, 
provincia y distrito seleccionados, utilizando las opciones seleccionadas en los elementos 
<select>. Luego, crea una lista de productos a partir del carrito, mapeando cada 
producto para incluir solo su ID y cantidad. Este mapeo se realiza utilizando el método 
map de los arrays. A continuación, la función intenta enviar una solicitud a la API para 


crear la orden de compra. Utiliza fetch para enviar una solicitud POST a la URL 
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/api/orden/crear, incluyendo en el cuerpo de la solicitud un objeto JSON con la 
dirección, productos, DNI del cliente, región, provincia, distrito y DNI de logística. La 
solicitud incluye encabezados que especifican que el contenido es de tipo JSON 


(Content-Type: application/json). 


Si la respuesta de la API no es exitosa (!response.ok), se lanza un error con un mensaje 
que incluye el estado HTTP de la respuesta. Si la respuesta es exitosa, la función convierte 
la respuesta JSON a un objeto JavaScript utilizando response.json y registra en la 
consola la nueva orden generada. Finalmente, la función elimina el carrito de compras 
del localStorage utilizando localStorage.removeltem, y muestra una alerta 
indicando que la orden se generó exitosamente. Si ocurre algún error durante el proceso, 
se captura en el bloque catch, se registra en la consola y se muestra una alerta con el 


mensaje de error. 


Los conceptos importantes utilizados en esta función incluyen async/await, que 
permiten escribir código asíncrono de manera más legible y manejable, y 
getElementById, un método del DOM para seleccionar elementos HTML por su ID. 
La propiedad selectedOptions devuelve una colección de las opciones seleccionadas 
en un elemento <select>. JSON.parse convierte una cadena JSON en un objeto 
JavaScript, mientras que JSON.stringify convierte un objeto JavaScript en una cadena 
JSON. El método fetch se utiliza para hacer solicitudes HTTP. El método map crea un 
nuevo array con los resultados de llamar a una función para cada elemento del array. 
localStorage es una interfaz para almacenar datos de manera persistente en el 
navegador del usuario, y removeItem es un método de localStorage para eliminar un 


ítem específico. 


> Funciones del área del proveedor 


AREA DEL PROVEEDOR 


KENY BRYAM LORENZO 
PABLO 


Perfil 


Gestionar Ofertas 


Gestión de Envios 


Facturación 
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La página de proveedor está estructurada para incluir un encabezado fijo, una barra 
lateral de navegación y una sección principal de contenido. El encabezado, con la clase 
header, está disefiado para ser flexible y permanecer fijo en la parte superior de la 
página, ofreciendo siempre accesibilidad a la navegación principal. Contiene un título 
centrado que indica "Panel de Proveedor" y varios íconos de navegación para una fácil 
interacción del que lo usa. La barra lateral, identificada con la clase sidebar, alberga el 
perfil del proveedor y botones de navegación para acceder a diferentes secciones, como 
"Perfil" y "Aprobar Usuarios". Esta barra es colapsable, lo que permite ahorrar espacio 
en la pantalla y mejorar la experiencia de usuario. La sección principal del contenido, con 
la clase main-content, se ajusta dinámicamente según el estado de la barra lateral, 


manteniendo un disefio responsivo y limpio. 


Obtenemos los productos de la base de datos 


En esta función, router.get('/” define una ruta para manejar solicitudes GET en la URL 
raíz del router. La función es asíncrona, lo que permite el uso de await para esperar la 
resolución de las promesas. Dentro del bloque try, se ejecuta una consulta SQL para 
seleccionar todos los registros de la tabla ordenes utilizando sequelize.query. La 
respuesta de la consulta se guarda en rows, que luego se envía al cliente en formato 
JSON mediante res.json(rows). Si ocurre un error durante el proceso, este se captura 
en el bloque catch, se registra en la consola con console.error(error), y se envia una 
respuesta de error al cliente con un código de estado 500 usando 


res.status(500).send('Error al obtener los datos de productos”). 


Algunos conceptos clave en esta función incluyen async/await, que permiten manejar 
operaciones asíncronas de manera más legible y eficiente; sequelize.query, que es una 
forma de ejecutar consultas SQL directamente en la base de datos; y res.json, que envia 


una respuesta JSON al cliente. También se utiliza console.error para registrar errores 
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en la consola, y res.status(500).send para enviar una respuesta de error al cliente en 


caso de que ocurra un problema al obtener los datos. 


Función para aceptar las órdenes de compra 


router.post('/aceptar', 


sequelize.query('SELECT * FROM productos WHERE id = 2 AND dni proveedor = 2", [ 


Cid 1 


ad, dr 


if (productos.1 
| return res.status(404) .json(( success: essage: 'Producto no encontrado en el stock" 3); 


k 
stock = productos[0]; 
if (productoStock.cantidad < can 


| return res.status(400) .json(f success message: 'Stock insuficiente o agotado' )); 


k 


Je k = productoStock.cantidad cantidad; 
await se -query(' UPDATE productos SET cantidad = ? WHERE id 


await sequelize.query('SELECT * FROM ordenes'); 


es) 1 
ON.parse(orden.productos); 
productos) ( 
tId && producto .nombre 
"9999999" ; 


if (updated) ( 
await sequelize.query('UPDATE ordenes SET productos = ? WHERE id = 2", 1 
ts: [JSON.stringify(productos), orden.id] 


res.status(494). json(( success: message: 'Producto no encontrado en la orden' ); 
> 
catch (error 
console.error(error); 
res.status(500).json(( success: essage: “Error al actualizar productos" 3); 


En esta función se maneja una solicitud POST en la ruta /aceptar para actualizar el 
dni proveedor de un producto específico. La función comienza extrayendo productId, 
nombre, precio, cantidad y dni del cuerpo de la solicitud (req.body). Luego, dentro de 


un bloque try, se ejecuta una consulta SQL para verificar el stock del producto en la tabla 
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productos utilizando sequelize.query. Esta consulta utiliza los parámetros productId 
y dni con replacements para prevenir inyecciones SQL. Si no se encuentra el producto 
en el stock, se devuelve una respuesta con un estado 404, indicando que el producto no 


está disponible. 


Si el producto está disponible, se verifica si la cantidad solicitada es menor o igual a la 
cantidad en stock. Si no hay suficiente stock, se devuelve una respuesta con un estado 
400, indicando que el stock es insuficiente o agotado. Si hay suficiente stock, se calcula 
el nuevo stock restando la cantidad solicitada del stock actual y se actualiza en la base de 


datos mediante otra consulta SQL con sequelize.query. 


Posteriormente, se seleccionan todas las órdenes de la tabla ordenes con una consulta 
SQL. La función inicializa una variable updated como false. Se itera sobre cada orden, 
parseando la columna productos (que está en formato JSON) a un array de objetos 
utilizando JSON.parse. La función busca en este array el producto específico que 
coincide con productId, nombre, precio, cantidad y dni. Si se encuentra el producto, se 
actualiza el dni proveedor a "9999999" y se marca updated como true. Después de 
actualizar el producto, se guarda la orden actualizada en la base de datos, convirtiendo 


el array de objetos de nuevo a una cadena JSON con JSON.stringify. 


Finalmente, si el producto fue actualizado correctamente, se envía una respuesta de éxito 
con res.json(f success: true J). Si no, se envía una respuesta con un estado 404 
indicando que el producto no se encontró en la orden. Si ocurre un error durante 
cualquier parte del proceso, este se captura en el bloque catch, se registra en la consola 
con console.error(error) y se envía una respuesta de error con un estado 500 
utilizando res.status(500).json(f success: false, message: 'Error al actualizar 


productos' 3). 


El método sequelize.query de Sequelize permite ejecutar consultas SQL 
directamente en la base de datos, proporcionando una interacción directa y flexible con 
la base de datos. Esta función ejecuta comandos SQL precisos para obtener y actualizar 


los datos necesarios para la lógica de la aplicación. 


La opción replacements se utiliza en sequelize.query para sustituir valores en la 
consulta SQL de manera segura. Esto es crucial para evitar inyecciones SQL, una técnica 
maliciosa que podría comprometer la seguridad de la base de datos al ejecutar comandos 
SQL no autorizados. Usar replacements asegura que los valores proporcionados sean 


tratados de manera segura, previniendo posibles ataques. 


JSON.parse es un método que convierte una cadena JSON en un objeto JavaScript. En 


esta función, se utiliza para manipular los datos almacenados como JSON en la base de 
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datos. Esto es útil para trabajar con datos complejos que se almacenan en formato JSON, 


permitiendo acceder y modificar propiedades de los objetos de manera más sencilla. 


JSON.stringify, por otro lado, convierte un objeto JavaScript en una cadena JSON. 
Este método se utiliza para almacenar datos complejos en la base de datos en un formato 
que pueda ser fácilmente serializado y deserializado. Al finalizar las actualizaciones, 
los datos del objeto se convierten nuevamente en una cadena JSON antes de ser 


almacenados. 


El uso de los bloques try/catch en esta función es esencial para manejar errores. El 
bloque try contiene el código que puede generar errores, como las consultas a la base de 
datos o la manipulación de datos. Si ocurre un error en este bloque, el control se 
transfiere al bloque catch, donde el error se captura y maneja de manera segura. Esto 


incluye registrar el error en la consola y enviar una respuesta adecuada al cliente. 


El método res.status se utiliza para establecer el código de estado HTTP dela respuesta. 
Esto permite al servidor indicar claramente el resultado de la solicitud, como un éxito, 
un error del cliente, o un error del servidor. Establecer el código de estado es importante 


para que el cliente entienda el resultado de su solicitud. 


Finalmente, el método res.json se emplea para enviar una respuesta en formato JSON. 
Este formato es común para intercambiar datos entre el servidor y el cliente en 
aplicaciones web, proporcionando una estructura clara y fácil de interpretar. Enviar 
respuestas en formato JSON permite una comunicación eficaz y estructurada entre el 


backend y el frontend de la aplicación. 
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Función para cargar a la pantalla la solicitud de orden de compra 


function cargarPro s() | 


«then(response => ( 
if (!response.ok) ( 
| throw new Error 


) 


return response. json(); 


J 
) 
-«then(data => ( 
console. log( » data); 
const productos = data.flatMap(orden => 
try | 
const productosParsed = JSON.parse(orden.productos); 
return productosParsed.filter(producto => 
const comparacion = producto.dni proveedor === dniProveedor; 
console. log(" Compa | -- fproducto.dni proveedor) con $fdniProveedor) 
return comparacion; 
); 
) catch (error) ( 
console.error( 
return []; 


); 


const tableBody = document .getElementById( 
tableBody.innerHTML = ""; 


productos . forEach( producto => 
const row = document. createElement ("tr"); 
row. innerHTML = 
(producto. id) 
$/producto. nombre? 
$(producto.precio) 
$(producto.cantidad) 
$(producto.id)” da $(producto.nombre) 


tableBody .appendChild(row); 
); 
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document ectoraAl] ).forEach(button => 
button er function () 1 

const productId te 

const nombre = 

const precio = 

const cantidad 

const dni = this.getaA 

tetchn a 
method: 
headers: 1 


>, 


body: JSON.stringify(( productId, nombre, precio, cantidad, dni )) 
: 
«then(response => response.json() 
-«then(data => ( 
if (data.success) ( 
a PE 


t 
arPro 


+ data.message); 


» error)); 


«catch(error => console.error('E ] l » error)); 


Es una función compleja disefiada para interactuar con el servidor, obtener datos, 
procesarlos y renderizarlos en una interfaz de usuario, permitiendo además la 
interacción con los productos mostrados. En primer lugar, la función hace una solicitud 
HTTP GET ala ruta utilizando el método . Este método devuelve 
una promesa que se resuelve con la respuesta de la solicitud. Si la respuesta no es exitosa, 
es decir, si es falso, se lanza un error indicando que hubo un problema en 
la respuesta del servidor. Si la respuesta es exitosa, se convierte en un objeto JSON 


utilizando 


Una vez que los datos JSON se han recibido, se procesan mediante el método ; 


que permite aplanar el array de órdenes y extraer los productos. Dentro de este método, 


se intenta parsear el campo productos de cada orden utilizando . Si ocurre 
un error durante el del JSON, este se captura y se maneja con un bloque catch, 
retornando un array vacío para evitar que la función falle. Los productos se 


filtran para incluir solo aquellos cuyo dni proveedor coincida con una variable 
dniProveedor. Esta comparación se realiza dentro del método filter, y se registra en la 


consola para fines de depuración. 


Después de filtrar los productos, la función se encarga de limpiar el contenido actual de 
la tabla HTML donde se mostrarán los productos. Esto se hace estableciendo 

a una cadena vacía. Luego, para cada producto filtrado, se 
crea una nueva fila de utilizando ,Y se 


establece su contenido HTML con las propiedades del producto, incluyendo un botón 
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"Aceptar”. Este botón contiene varios atributos de datos que representan las propiedades 


del producto, tales como data-id, data-nombre, data-precio, data-cantidad y data-dni. 


Una vez que las filas de productos se han agregado a la tabla, se afade un evento de clic 
a cada botón "Aceptar" utilizando document.querySelectorAII('.aceptar-btn” y el 
método forEach para iterar sobre cada botón. Cuando se hace clic en un botón, se 
recogen los atributos de datos del producto y se realiza una solicitud POST a la ruta 
/api/productos/aceptar con esos datos en el cuerpo de la solicitud, utilizando 
JSON.stringify para convertir el objeto JavaScript en una cadena JSON. Sila respuesta 
del servidor indica éxito, se muestra una alerta y se recargan los productos lamando 
nuevamente a cargarProductos. Si ocurre un error, se muestra una alerta con el mensaje 


de error y se registra el error en la consola. 


El método fetch es crucial para realizar solicitudes HTTP desde JavaScript y manejar 
respuestas de manera asíncrona. La combinación de fetch con then y catch permite 
manejar las respuestas y errores de las solicitudes de manera estructurada. Además, 
JSON.parse y JSON.stringify son métodos esenciales para convertir entre cadenas 
JSON y objetos JavaScript, lo cual es fundamental para procesar y almacenar datos de 


manera efectiva. 


El uso de flatMap y filter permite manipular y filtrar arrays de manera eficiente, 
mientras que querySelectorAll y addEventListener son métodos del DOM que 
permiten seleccionar elementos y agregar manejadores de eventos para hacer la interfaz 
interactiva. El método inner HTML se utiliza para establecer o devolver el contenido 


HTML de un elemento, y appendChild permite afiadir nuevos nodos al DOM. 


Base de datos para que proveedor registre sus bienes y suministros 


ENGINE=InnoDB CHARSET=ut f8mb4 =utf8mb4 general ci; 
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> Funciones del área de almacén 


ZA 
— Ga) 


AREA ALMACEN 


PATA ÂMARILA 


Recepción de Bienes 


Gestión de Inventario 


Distribución de Bienes 


El encabezado de la página está disefiado para ser fijo en la parte superior de la ventana, 
permitiendo siempre la accesibilidad a la navegación principal. Utiliza un fondo con un 
gradiente de azul marino a azul cielo y contiene un título centrado "Panel de Almacén". 
El encabezado está estilizado para ser flexible, permitiendo la inclusión de íconos de 
navegación a la izquierda y derecha, los cuales cambian de color y se agrandan cuando 
se pasa el cursor sobre ellos. Este encabezado también incluye un botón de alternancia 
que permite colapsar o expandir la barra lateral, proporcionando una experiencia de 


usuario dinámica. 


La barra lateral contiene el perfil del administrador del almacén y varios botones de 
navegación para acceder a diferentes secciones. Está disefiada con un gradiente de azul 
medianoche a azul cielo y puede colapsarse para ahorrar espacio en la pantalla. Cuando 
la barra lateral está colapsada, solo se muestran los íconos, ocultando los textos y las 
imágenes de perfil. Esto mejora la usabilidad en pantallas pequeíias y permite a los 


usuarios concentrarse en el contenido principal. 


La sección de contenido principal se ajusta dinámicamente según el estado de la barra 
lateral. Está disefiada con un fondo gris claro y márgenes adecuadas para mantener una 
separación visual clara entre los elementos. Esta sección contiene diversas subsecciones 
que se muestran u ocultan según la navegación del usuario. Las secciones se activan 
mediante clases CSS y se estilizan para ser coherentes y profesionales, utilizando 


sombras y bordes suaves para destacar los elementos. 


El formulario de búsqueda y filtros permite a los usuarios buscar productos específicos 
en el almacén. Los usuarios pueden filtrar los productos por diferentes criterios, como 


nombre, categoría o proveedor. Los elementos del formulario están disefiados para ser 
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claros y accesibles, con etiquetas en negrita y campos de entrada amplios. Los botones 
de formulario tienen transiciones suaves de color y sombra, mejorando la experiencia de 


interacción del usuario. 


La tabla de productos es una parte central del diseão de la página. Está disefiada para ser 
clara y legible, con columnas que muestran el ID, nombre, precio, cantidad y proveedor 
de cada producto. Cada fila de la tabla incluye un botón "Aceptar" que permite al usuario 
interactuar con los productos directamente desde la tabla. Los botones están estilizados 
para ser visibles y accesibles, con cambios de color al pasar el cursor sobre ellos para 


indicar interactividad. 


El archivo CSS proporciona estilos detallados para todos estos elementos, asegurando 
una apariencia coherente y profesional. Los encabezados tienen un fondo con un 
gradiente azul y texto blanco, disefiados para mantenerse fijos en la parte superior de la 
ventana. La barra lateral tiene un gradiente y puede colapsarse, mientras que los botones 
de navegación cambian de color al pasar el cursor sobre ellos. La sección de contenido 


principal tiene un fondo gris claro y sombras para separar visualmente los elementos. 


Funcionalidad del combobox para cargar la tabla 


Primero, la función agrega un event listener para el evento DOMContentLoaded en 
el documento. Este evento se dispara cuando todo el HTML ha sido completamente 
cargado y parseado, sin esperar a que se carguen las hojas de estilo, imágenes y 
subframes. Esto asegura que todos los elementos del DOM estén listos para ser 


manipulados. 


Dentro del event listener DOMContentLoaded, se llama a la función 
cargarOrdenes. Esta función es responsable de hacer una solicitud al servidor para 
obtener las órdenes válidas y Ilenar el combobox con estas órdenes. Esto prepara la 


página con los datos iniciales necesarios para la gestión de las órdenes. 
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A continuación, se configura el evento onclick para el botón con el ID actualizarEstado. 
Cuando se hace clic en este botón, se verifica si hay una orden seleccionada en el 
combobox (select). Si no hay una orden seleccionada (selectedIndex === -1), se 
muestra una alerta indicando al usuario que debe seleccionar una orden. Si hay una 
orden seleccionada, se parsea el valor seleccionado (que está en formato JSON) para 
obtener el objeto de la orden. Luego, se lama a la función 
gestionarArticulosY ActualizarEstado con el ID de la orden y los productos de la orden 
como argumentos. Esta función maneja la lógica para gestionar los artículos y actualizar 


el estado de la orden. 


Finalmente, se configura un event listener para el evento change del combobox con 
el ID órdenes. Este evento se dispara cuando el usuario selecciona una orden diferente 
en el combobox. Cuando esto ocurre, se lama a la función actualizarTablaProductos. 
Esta función es responsable de actualizar la tabla de productos en la página para mostrar 


los detalles de los productos asociados con la orden seleccionada. 


Función para cargar la tabla con las ordenes aceptadas por el proveedor 
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La función tiene como objetivo obtener una lista de órdenes válidas desde el servidor, 


poblar un combobox con esas órdenes y actualizar una tabla de productos basada en la 
orden seleccionada. Para lograr esto, la función realiza una solicitud HTTP GET ala ruta 
/api/rece ordenes/validas utilizando el método fetch, que permite realizar 
solicitudes HTTP de manera asíncrona. El método fetch devuelve una promesa que, una 


vez resuelta, contiene la respuesta del servidor. 


Cuando la respuesta se recibe, se convierte en un objeto JSON mediante el método 
response.json(). Esta conversión es esencial para poder trabajar con los datos en un 
formato utilizable dentro de la función. Una vez convertida la respuesta, se procesan las 
órdenes recibidas. Primero, se seleccionan los elementos HTML correspondientes al 
combobox y al botón de actualizar estado. Luego, se limpia el contenido actual del 


combobox y de la tabla de productos para asegurarse de que no haya datos antiguos. 


Si no hay órdenes válidas disponibles, se muestra una alerta al usuario y se desactiva el 
botón de actualizar estado. Esta verificación es importante para informar al usuario 
sobre la ausencia de órdenes y para evitar acciones innecesarias. Si hay órdenes 
disponibles, se itera sobre cada una de ellas y se crea un elemento option para cada 
orden. El valor de cada opción es la orden completa en formato JSON, y el texto visible 
es el ID de la orden. Estos elementos se afiaden al combobox, permitiendo al usuario 


seleccionar una orden específica. 


El botón de actualizar estado se habilita si hay órdenes disponibles. Luego, si hay 
opciones en el combobox, se selecciona la primera por defecto y se Ilama a la función 
actualizarTablaProductos para mostrar los productos de la primera orden en la tabla. 
Esta inicialización asegura que los productos de la primera orden se muestren 


automáticamente al cargar la página. 


En caso de que ocurra un error durante la solicitud o el procesamiento de las órdenes, 


este se captura en un bloque catch. El error se registra en la consola y se muestra una 
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alerta al usuario indicando que hubo un problema al obtener las órdenes válidas. Este 
manejo de errores es crucial para mantener informados a los usuarios y para la 


depuración del sistema. 


Entre los conceptos y métodos importantes utilizados en esta función se encuentran 
fetch, que permite realizar solicitudes HTTP de manera asíncrona; then, que se utiliza 
para encadenar acciones a una promesa resuelta; y catch, que maneja errores en 
promesas. El método response.json() convierte la respuesta HTTP en un objeto JSON. 
Además, document.getElementBylId se utiliza para seleccionar elementos HTML por 
su ID, y innerHTML se usa para establecer o devolver el contenido HTML de un 
elemento, permitiendo limpiar el contenido de elementos HTML. Por último, 
createElement crea un nuevo elemento HTML, y appendChild afade un nodo al final 


de la lista de un nodo padre especificado. 


Función para la creación de la tabla 


ateElement 


La función actualizarTablaProductos se encarga de actualizar el contenido de una tabla 
HTML para mostrar los productos asociados con una orden seleccionada en un 


combobox. A continuación, se detalla lo que hace cada parte de esta función: 


Primero, la función selecciona el elemento del combobox que contiene las órdenes 
mediante document.getElementById('ordenes") y el cuerpo de la tabla (tbody) 
donde se mostrarán los productos utilizando 
document.getElementById('productos-table").querySelector('tbody'). Para 


asegurarse de que la tabla esté limpia antes de afiadir nuevos datos, se establece 
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tbody.inner HTML a una cadena vacía, lo que elimina cualquier contenido previo en 
la tabla. 


La función verifica si hay una orden seleccionada en el combobox. Si no hay ninguna 
selección (selectedIndex === -1), la función simplemente retorna sin hacer nada, 


evitando así cualquier operación innecesaria o errores. 


Si hay una orden seleccionada, se obtiene el valor de la selección, que está en formato 
JSON, y se convierte en un objeto JavaScript utilizando JSON.parse. Este objeto orden 


contiene los detalles de la orden, incluyendo una lista de productos asociados. 


Luego, se itera sobre la lista de productos utilizando forEach. Para cada producto, se 
crea una nueva fila de tabla (<tr>) y se define su contenido HTML, afiadiendo celdas 
(<td>) para mostrar el ID, nombre, precio y cantidad del producto. Cada nueva fila se 


afiade al cuerpo de la tabla (tbody) utilizando tbody.appendChild(row). 


Función para actualizar el stock luego de recibir la orden de compra 


En esta parte del código, la función está obteniendo la información completa de los 
productos desde la base de datos. Esto se realiza utilizando el método Promise.all junto 
con el método map para manejar múltiples solicitudes asíncronas de manera 


concurrente. 


Primero, la función Promise.all se usa para ejecutar todas las solicitudes en paralelo y 
esperar hasta que todas se completen. Promise.all toma un array de promesas (en este 
caso, las promesas generadas por fetch) y devuelve una sola promesa que se resuelve 
cuando todas las promesas del array se han resuelto o se rechaza si alguna de las 


promesas se rechaza. 


Dentro de Promise.all, se utiliza el método map para iterar sobre el array de 


productos. Para cada producto, se realiza una solicitud HTTP con fetch a un endpoint 
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específico (/api/rece ordenes/productos/$fproducto.id)). Esta solicitud busca 


obtener los detalles del producto basado en su id. 


Después de realizar la solicitud con fetch, se verifica si la respuesta del servidor es 
exitosa utilizando la propiedad ok de la respuesta. Si la respuesta no es exitosa 
(!response.ok), se lanza un error con un mensaje que indica que el producto no se 
encontró. Esto se hace para asegurarse de que la función maneje correctamente los casos 


en que la solicitud no pueda recuperar la información del producto. 


Si la respuesta es exitosa, se convierte el cuerpo de la respuesta a formato JSON 
utilizando el método json() de la respuesta. Este método también es asíncrono y 
devuelve una promesa que se resuelve con el resultado de convertir el cuerpo de la 


respuesta en un objeto JavaScript. 


Finalmente, se crea y retorna un nuevo objeto que contiene los detalles del producto, 
incluyendo nombre, unidad, cantidad y precio. La cantidad proviene del objeto producto 
original, mientras que nombre, unidad y precio se obtienen de la respuesta JSON. Este 


nuevo objeto representa la información completa del producto que se necesita para los 


pasos posteriores en la gestión de la orden. 


En esta parte del código, se gestionan los artículos antes de actualizar el estado de la 
orden. Este proceso se realiza usando Promise.all junto con fetch para manejar 


múltiples solicitudes HTTP de manera concurrente. 


Primero, se utiliza Promise.all para ejecutar todas las solicitudes en paralelo y esperar 
hasta que todas se completen. Promise.all toma un array de promesas (en este caso, 
las promesas generadas por fetch) y devuelve una sola promesa que se resuelve cuando 
todas las promesas del array se han resuelto o se rechaza si alguna de las promesas se 


rechaza. 
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Dentro de Promise.all, se usa el método map para iterar sobre el array 
productosCompletos. Para cada producto, se realiza una solicitud HTTP con fetch al 
endpoint /api/rece ordenes/gestionarArticulo. Esta solicitud tiene el propósito 


de enviar los detalles del producto al servidor para que los gestione adecuadamente. 


La solicitud HTTP se configura con el método POST, lo que indica que se está enviando 
información nueva al servidor. Se incluyen los headers necesarios para que el servidor 
interprete correctamente la  solicitud, especificamente ''Content-Type': 


'application/json', lo que indica que el cuerpo de la solicitud está en formato JSON. 


El cuerpo de la solicitud (body) se construye usando JSON.stringify, que convierte el 
objeto JavaScript con los detalles del producto (nombre, unidad, cantidad, precio) en 
una cadena JSON. Esta cadena JSON se envia al servidor como parte de la solicitud 
POST. 


Al final, Promise.all asegura que todas las solicitudes fetch para gestionar los artículos 
se completen antes de que la función continúe con los siguientes pasos. Este enfoque 
garantiza que todos los productos se gestionen adecuadamente antes de proceder a 


actualizar el estado de la orden. 


Después de gestionar los artículos, la función procede a actualizar el estado de la orden. 


Utiliza fetch para enviar una solicitud HTTP PUT al endpoint 
/api/rece ordenes/$(id)/estado, donde $fid) es el identificador de la orden. La 
solicitud incluye un header Content-Type con el valor application/json y un cuerpo 
(body) que contiene un objeto JSON con el nuevo estado de la orden (1 estado: 
'almacen' 3). Si la respuesta del servidor no es exitosa (!response.ok), se lanza un 


error indicando que hubo un problema al actualizar el estado de la orden. 
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Si la actualización del estado es exitosa, se muestra una alerta informando al usuario que 
el estado de la orden se ha actualizado correctamente. Luego, la función llama a 
cargarOrdenes para recargar las órdenes y actualizar la tabla de productos. Si ocurre 
algún error durante la gestión de los artículos o la actualización del estado, se captura en 
el bloque catch, se registra el error en la consola y se muestra una alerta al usuario 


indicando que hubo un problema en el proceso. 


La conexión con la base de datos que se realiza para obtener datos 


express = require( 'express'); 
router = express.Router(); 
f obtenerOrdenesValidas, actualizarEstadoOrden, gestionarArticulo, obtenerProductoPorId ) = require('../contr 


router.get('/validas', (reg, res) f 


await obtenerOrdenesValidas(); 


S)5 


le.error('Error al obtener las órdenes válidas:', error); 
res.status(500). json(( error: “Error al obtener las órdenes válidas" 3); 


await actualizarEstadoOrden(id, estado); 
e: “Estado de la orden actualizado correctamente" 1); 


En esta parte del código se definen dos rutas en un router de Express para manejar 
solicitudes HTTP relacionadas con órdenes. La primera ruta, /validas, es una ruta GET 
que se utiliza para obtener todas las órdenes válidas. Cuando se recibe una solicitud GET 
en esta ruta, se Ilama a la función obtenerOrdenesValidas para obtener las órdenes 
válidas desde la base de datos u otro origen de datos. Si la operación es exitosa, se envían 
las órdenes como una respuesta JSON al cliente. En caso de que ocurra un error durante 
el proceso, se captura y se envía una respuesta con un estado HTTP 500 y un mensaje de 


error. 


La segunda ruta, /:id/estado, es una ruta PUT que se utiliza para actualizar el estado 
de una orden específica. El id de la orden se pasa como un parámetro en la URL, y el 
nuevo estado de la orden se proporciona en el cuerpo de la solicitud. Cuando se recibe 
una solicitud PUT en esta ruta, se extraen el id de la orden y el estado del cuerpo de la 
solicitud. Luego, se llama a la función actualizarEstadoOrden con estos valores para 


actualizar el estado de la orden en la base de datos. Si la operación es exitosa, se envia 
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una respuesta JSON con un mensaje indicando que el estado de la orden se actualizó 
correctamente. Si ocurre un error, se captura y se envia una respuesta con un estado 


HTTP 500 y un mensaje de error. 


Los métodos utilizados en este contexto son métodos asíncronos (async) que permiten 
manejar operaciones que pueden tardar en completarse, como acceder a una base de 
datos. La estructura try-catch se usa para manejar errores de manera eficiente, 
garantizando que se capture cualquier problema y se informe adecuadamente al cliente 
mediante respuestas HTTP adecuadas. El método res.json se usa para enviar respuestas 
en formato JSON, mientras que res.status(500).json se usa para enviar respuestas de 


error con un estado HTTP 500. 


La base de datos que se está utilizando para cargar los productos recibidos 


ENGINE=InnoDB CHARSET=ut f8mb4 =utf8mb4 general ci; 


CONCLUSIÓN 


La implementación del sistema "Pata Amarilla" va permitir a la empresa de turismo 
optimizar significativamente la gestión de sus bienes y suministros. Este sistema integral 
abarca y conecta múltiples áreas críticas como Usuario, jefe de área, Administración, 
Proveedor, Logística y Almacén, asegurando que todos los procesos internos se realicen 
de manera eficiente y coordinada. A continuación, se detallan las conclusiones clave 


derivadas del uso y beneficios de este sistema: 


La implementación de este sistema va ser una herramienta importante para la empresa, 
permitiendo una administración más precisa y eficiente de los bienes y suministros. La 
capacidad de rastrear y gestionar inventarios en tiempo real reduce significativamente 
los errores y pérdidas asociadas con la gestión manual, mejorando así la eficiencia 


operativa y el funcionamiento de todo el sistema. 
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El disefio del sistema permite la integración fluida de diversas áreas funcionales dentro 
de la empresa. Cada módulo, ya sea de Usuario, Administración, Proveedor, Logística o 
Almacén, está interconectado, facilitando una comunicación efectiva y una transferencia 
de datos sin interrupciones entre departamentos o áreas. Esta integración asegura que 
las actividades de un área informen y apoyen a las de otra, creando un flujo de trabajo 


sinérgico y cohesivo. 


Las funcionalidades detalladas del sistema, explicadas en este documento, aseguran que 
cada área pueda cumplir con sus responsabilidades de manera efectiva. Por ejemplo, los 
módulos de Administración y Logística trabajan conjuntamente para asegurar que los 
pedidos se gestionen y procesen de manera eficiente, desde la solicitud inicial hasta la 
entrega final. Esta coordinación no solo mejora la eficiencia interna, sino que también 


reduce los tiempos de respuesta y mejora la satisfacción del cliente. 


El sistema "Pata Amarilla" no solo mejora la eficiencia operativa de la empresa, sino que 
también asegura una mayor transparencia y control sobre los recursos. La capacidad de 
generar reportes detallados y de acceder a datos en tiempo real permite a los 
administradores tomar decisiones informadas y estratégicas. Además, la transparencia 
en los procesos reduce la probabilidad de errores y fraudes, aumentando la confianza en 


la gestión interna. 


Se podría decir también, que la implementación del sistema "Pata Amarilla" va ser un 
catalizador para el crecimiento y éxito a largo plazo de la empresa. Al mejorar la 
eficiencia, transparencia y control sobre los recursos, el sistema no solo optimiza las 
operaciones actuales, sino que también prepara a la empresa para futuros desafios y 
oportunidades. La capacidad de adaptarse y evolucionar con las necesidades de la 
empresa asegura que "Pata Amarilla" seguirá siendo una herramienta invaluable en la 
gestión de bienes y suministros, contribuyendo al crecimiento sostenido y al éxito de la 


empresa. 
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